为什么我的图像在使用CSS时不能移动 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

【前端】移动端Web开发学习笔记【1】

当一个鼠标事件发生时，有不少于五种属性对可以给你提供关于事件位置的信息。对于我们当前的讨论来说它们当中的三种是重要的： pageX/Y提供了相对于元素的以CSS像素度量的坐标。...Web开发者对设备宽度不感兴趣；这个是浏览器窗口的宽度。所以在桌面环境下去使用width而去忘记device-width吧。我们即将看到这个情况在移动端会更加麻烦。...---- Part 3: 移动端 ---- 两个viewport viewport太窄了，以至于不能正常展示你的CSS布局。明显的解决方案是使viewport变宽一些。...像在桌面环境上一样，做为一个开发者你永远不需要这个信息。你对屏幕的物理尺寸不感兴趣，而是对屏幕上当前有多少CSS像素感兴趣。...clientX/Y是相对于visual viewport来计算(注意：这里竟然不是client viewport)，以CSS像素为单位的。这有道理的，即使我还不能完全指出这么做的好处。

1683 0

HTMLayout 界面贴图技术

: ****ground-position-right 或 ****ground-position-left 定义开始铺排的横坐标,这两个属性不能同时使用, 如果指定 ****ground-position-left...****ground-position-top 或 ****ground-position-bottom 定义图片的顶部偏移,这两个属性不能同时使用 4、 ****ground-repeat...可以配合下面的属性使用 ****ground-position-left: 或 ****ground-position-right 定义图片水平偏移,这两个属性不能同时使用 ****ground-position-top...or ****ground-position-bottom 定义开始铺排的纵坐标,这两个属性不能同时使用如果指定了 ****ground-position-bottom 并且是一个正数, 则图片向上移动指定的距离...个像素,指定下面的CSS进行九宫格切图.

2.5K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

2019年了，你还不会CSS动画？

今年我面试了很多同学，只要看到简历上写“熟练掌握CSS3”的，我都会问问动画相关知识。然而我发现：都 2019 年了，还有很多同学不会 CSS 动画。我经常爱问的一个问题是，实现如下的效果： ?...即，一个小球从向右匀速移动 200px，然后移动回来，再移动过去，最后停留在 200px 处。动图效果如下： ? 就是需求这么简单的一个动画，然而绝大多数人却不能答对。...不卖关子，我的答案是： ? 大部分面试者说，关于 CSS 动画，也看过一些教程，工作中却不怎么使用，因此就忘了。这里，我准备为对 CSS 动画掌握不深的小伙伴补充一下相关知识。欢迎大佬们拍板。...帧的概念，想必大家很清楚，比如电影就是一帧帧图片在播放，利用图像在人脑中短时间停留来形成动态效果。CSS 动画也是利用这个原理。不过开发者不需要给出每一帧的定义。只需要定义一些关键的帧即可。...其中，rotate 是我给这个动画起的名字，from 表示最开始的那一帧，to 表示结束时的那一帧。

4313 0

Web性能优化：不要与浏览器预加载扫描器对抗

在2.0秒时，CSS和图片被请求。由于解析器在加载样式表时受阻，而注入async脚本的内联JavaScript在2.6秒时出现在样式表之后，因此该脚本提供的功能并不能尽快使用。...图6：在移动设备上通过模拟3G连接在Chrome上运行的网页的WebPageTest网络瀑布图。该页面包含一个样式表和一个异步脚本元素。预加载扫描器在渲染阻塞阶段发现了该脚本，并与CSS同时加载。...以下是资源加载时发生的情况。图10：在移动设备上通过模拟3G连接在Chrome浏览器上运行的一个网页的WebPageTest网络瀑布图。...可以无效化预加载扫描器的一种模式是使用客户端 JavaScript 呈现标记：图12：通过模拟 3G 连接在移动设备上的 Chrome 上运行的客户端呈现网页的 WebPageTest 网络瀑布图。...这种情况的补救措施取决于对这个问题的回答：是否有理由说明为什么您的页面标记不能由服务器提供而不是在客户端呈现？

5.4K15 1

Day4:html和css

层叠样式表 css的优先级使用!...我们在使用css的时候,会出现两个或多个规则在同一元素上,这时css就会出现优先级的情况....在css中的样式继承权重值是为0的,不管父元素权重多大,被子元素继承时,它的权重都是为0,意思是子元素定义的样式会覆盖继承的样式,行内样式优先.在css中,如果权重相同,css就会遵循就近原则,则是靠近元素最近的样式为最大优先级...背景图片语法： background-image : none | url (url) // none : 　无背景图（默认的） // url : 　使用绝对或相对地址指定背景图像如果图片不重复地话...*/ - :visited /* 已访问的链接 */ - :hover /* 鼠标移动到链接上 */ - :active /* 选定的链接 */ CSS注释 /* 需要注释的内容

4K2 0

CSS 背景(background)

默认的） url : 　使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。...（默认的） no-repeat : 　背景图像不平铺 repeat-x : 　背景图像在横向上平铺 repeat-y : 　背景图像在纵向平铺背景位置(position) 语法： background-position...背景缩放(CSS3) 通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。...其参数设置如下： a) 可以设置长度单位(px)或百分比（设置百分比时，相对于父盒子的宽高） b) 设置为cover时，会自动调整缩放比例（等比例拉伸），保证图片始终填充满背景区域（直到宽和高都填满，可能会溢出...每组属性间使用逗号分隔。如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。

2.1K2 0

前端成神之路-CSS（选择器、背景、特性）

CSS复合选择器目标理解理解css复合选择器分别的应用场景应用使用后代选择器给元素添加样式使用并集选择器给元素添加样式使用伪类选择器为什么要学习css复合选择器 CSS选择器分为...行高那些事（line-height）目标理解能说出行高和高度三种关系能简单理解为什么行高等于高度单行文字会垂直居中应用使用行高实现单行文字垂直居中能会测量行高 3.1...none | url (url) 参数作用 none 无背景图（默认的） url 使用绝对或相对地址指定背景图像 background-image : url(images/demo.png);...5.3 CSS优先级（重点） ? 概念：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，选择器相同，则执行层叠性选择器不同，就会出现优先级的问题。 1)....CSS注释 CSS注释规则： /* 需要注释的内容 */ 进行注释的，即在需要注释的内容前使用 "/*" 标记开始注释，在内容的结尾使用 "*/"结束。

1.9K2 0

前端成神之路-CSS高级技巧

CSS高级技巧目标理解能说出元素显示隐藏最常见的写法能说出精灵图产生的目的能说出去除图片底侧空白缝隙的方法应用能写出最常见的鼠标样式能使用精灵图技术能用滑动门做导航栏案例...:default">我是小白我是小手我是移动 CSS精灵技术（sprite) 重点 5.1 为什么需要精灵技术 ? 图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...pink老师告诉你我们为什么需要精灵技术：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。...我们精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放。我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

6.8K3 0

css笔记

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。...好比我们的浮动，有浮动开始，则就应该有浮动结束。为什么要清除浮动我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现，但是，你不能说浮动不好。...注意一定要首先强制一行内显示，再次和overflow属性搭配使用 CSS精灵技术（sprite）小妖精雪碧精灵技术产生的背景图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求...精灵技术的使用 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image...(50px,50px) 使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

7.7K5 0

5个方法对于重量级网站的图片优化

####1.调整图像大小这是必须的。将图像大小调整为您网站上所需大小的图像。不，我不是在谈论使用CSS或在HTML中调整大小。我正在谈论调整服务器上的图像大小，然后将其发送给浏览器。...是的，虽然移动电话已经变得强大，移动网络变得更好，但数据显示移动数据速度仍然比宽带速度慢得多。有许多国家或地区暴扣一些乡村移动数据连接不稳定。因此，在为移动设计Web体验时要格外注意。...移动设备的另一个影响因素是设备像素比率或DPR值。现代移动电话具有高密度屏幕，在相同的平方英寸中包含更多像素。 [image.png] 在常规设备上看起来很好的图像在高密度屏幕上看起来会略微模糊。...web 图像在开始并未加载。只加载了图像占位符。稍后异步加载图像。请注意，没有用于加载图像的序列。假设你的网页上有100个产品。如果您在同一时间和最开始请求所有100个产品图像，则会减慢加载时间。...这些图像将与网页上的其他关键项目（如CSS和JS）竞争网络带宽和CPU资源。使用延迟加载时，我们只会加载30个最初对用户可见的图像。然后，当用户开始向下滚动页面时，我们将继续加载更多图像。

1.6K2 0

番外特别篇之为什么我不建议你直接使用UIImage传值?--从一个诡异的相册九图连读崩溃bug谈起

形势,瞬间变得很紧张,这个问题的优先级瞬间被提到了最高!再次尝试了各种可能的情况.图片大小?它是9张1.5M的图,我就用9张3M的图,也是OK的呀!选取时,顺序有问题?...我能描述的,可能仅仅是我处理这个问题的一个相对的完整脑洞过程.部分分析过程间,明显不是有逻辑性的.越是诡异的问题,越是不能循规蹈矩,要时刻尝试去问自己最可能地问题是什么,而不是沿着一条路,一条道走到黑....2.确定是相册选取图片内存过高这个问题,在真机上,并不好确定,因为连续读取9张高像素图时,内存是瞬间飙升的,你几乎没有机会去观察内存占用,给人一种因为某种逻辑判断而导致的Crash的错觉.如果换做模拟器...衍生问题应用与解决故事,真的还没有完结.从相册顺利读取这张诡异的高像素图后,我发现我没有办法将它上传,也无法在轮播图上,连续显示.简要概括如下....我真没想到,一个UIImage对象,竟然会二次引起高内存占用.最终的解决方法,就是在前一个页面传递 NSData数组,在赋值处,再使用imageWithData:转换为 UIImage.这样,内存使用基本没什么起伏

1.7K7 0

没啥新年礼物送给外甥的，就用AI做个随机数学题生成器吧!

还是不耽误时间了，就用我的神器——豆包吧！别问为什么不用腾讯云AI代码助手，主要就是我下载了豆包桌面版，比较熟悉也方便调用。这个系统是参考某少儿编程项目的，我直接输入网页，让豆包做一个一样的。...这个项目中，比较简单，只有一个html、js、css，如图（css和js文件中都只有一个文件）：这里多了一个bootstrap文件夹完全是为了使用本地css和js，提升网站加载的。...AI在生成初始网页代码时，一般很难做到100%的完成度，所以需要简单的调试：对于分开的js和css文件，我直接加载到html主页中，直接给AI去检测问题，直接抛出问题“为什么点击按钮不能出题”，这里我们自己分析就是...，在我的表述中，本身就是让这个显示答案的功能设置成了开关，从这里就能看出，我们在引导AI的时候一定要用确定且正确的方法，请勿模棱两可，使用不切当的表述。...然后我直接把我的要求直接一并给了AI，让AI知道我试图让他完整地明白我的需求，就像在给AI一项目的策划方案一样。

602 0

揭秘移动端px,dpi,dpr

前言移动端开发的时候，我们拿到的 UI设计稿通常都是 640px 或者是 750px ,明明我们的设备视口宽度是设计稿的一半 ,这是为什么呢？...比如iPhone5使用的是Retina视网膜屏幕，用2x2的Device Pixel代表1x1的CSS Pixel，所以设备像素数为640x1136px，而CSS逻辑像素数为320x568px 所以，1...，要渲染在 dpr为2 的Retina屏上，显然不能做到1个位图像素对应一个物理像素，这时候就会模糊，解决方式就是使用二倍图 8080px ?...那么一开始就用 750px ，切下来的图是不是可以直接适配Retina屏（这也解释了为什么视觉稿的画布大小要×2），当然了 375px 也行,不过此时我们处理375px设计稿的时候，认为这个单位是逻辑像素...，但是有些情况却不能按逻辑像素去处理，比如图片，这时候得需要设计提供·二倍图 ,当然我们在375px设计稿量细边框的高度的时候，注意不要惯性觉得是1px长度，也有可能是 0.5px ,因为是 375px

2.2K1 0

2018年十大轻量级的CSS框架为构建快速网站

当建立一个网站时，使用CSS框架是一个真正的节省时间的方法，因为它为你提供了每个网页设计师在制作网站时需要的工具。但是正如你所知道的，加载速度是一个非常重要的质量因素。...因此，我编写了一个当前十大轻量级CSS框架的实现列表，用于创建漂亮的、功能强大的、超快的加载网站。 1、Pure CSS 只有3.8KB的缩小和压缩，但是充满了功能!...多年来，纯CSS一直是我选择的轻量级框架，包括与外包软件开发团队合作。 ?...Bulma是用移动第一的方法构建的，它使每个元素都能对垂直阅读进行优化，并且它的网格是用Flexbox完全构建的。使用相同大小的列实现灵活的布局就像在HTML元素中添加.column类一样简单。...在线演示 10、Picnic CSS 当gzip压缩时，只有3kb大小，野餐肯定是轻量级的，但也有创建一个好看、功能强大的网站所需的一切。 ? 在线演示

1.2K2 0

React Native vs. Cordova、PhoneGap、Ionic，等等

本文首发于知乎，各位可以通过点击文章下方的阅读原来来访问原文地址 ? 在前面的文章中，我曾说过 React Native 很棒，因为它能让我们使用原生 UI 来开发应用。...这正是他们有上述的好处和限制的原因所在。 ? 为什么我们不能集两者之优势，同时又避免它们的不足呢？这正是 React Native 要做的事。 React Native 代表的是移动端框架的第三阵营。...React Native 直接使用了原生 UI 组件，而 WebView 框架是使用 HTML/CSS 的 Web UI 来模拟原生 UI 。真和假，你更喜欢哪个？...React Native 使用 JavaScript 来让开发变得简单另一方面，React Native 还可以让我们使用 JavaScript 来编写应用，同时使用类似于 HTML 和 CSS 的语法来开发...这无疑降低了 Web 设计师和开发人员的门槛。当需要时，React Native 还提供了一种渗透到原生框架的方法，以实现我们希望在应用中实现的任何原生功能。这有点像在黑客帝国中打电话。 ?

3.2K4 0

10分钟内就可以学会的几个CSS高招

所以，我完全理解为什么你会讨厌 CSS，但今天，我于分享的是一个小课程，你将学习如何使用现代功能编写干净的 CSS，同时避免在 2021 年以及未来不应该编写糟糕的代码。...当学习基本的 CSS 时，你将更好地控制你代码的创造力和自由度，直到我进入 Web 开发职业生涯后，我才得到的最好建议是学习 CSS 盒模型，因为当你理解它时，语言开始变得更有意义，事实上它很简单，我现在就教你盒子模型...2、 Firefox 很棒这给我带来了第二个提示，在调试 CSS 时不要使用 chrome，而Firefox，他们的开发工具通常更胜一筹，尤其是在 CSS 方面，如果我检查元素，我会像在 Chrome...3、 Flexbox 很棒一种选择是给子元素绝对定位，然后使用 top 和 left 属性移动到右下角，然后将其转换回50%，以将其放在可以工作的中心，但现代CSS有一种更好的方法是使用flexbox...Grid 允许你考虑大图布局，当你将元素设置为显示网格时，它对开发人员更加友好，你可以将其子项定义为一堆列和行。 ? 列的宽度可以用网格模板列属性定义，我们在这里有三个值： ?

1.4K2 0

前端性能优化总结

(2) 内容合并、压缩： JS、CSS 文件合并、服务器开启 gzip、雪碧图，通常需要借助一些工具，比如webpack进行打包，以及在线雪碧图生成器 (3) 缓存：设置http请求头Cache-Control...未来WebAssembly可能被浏览器内置支持，并使其能够直接调用DOM，Web Workers或其他浏览器API等注意事项：同源限制、DOM 限制、不能读取本地文件、使用消息通信、不能使用alert...在离屏canvas上预渲染相似的图形或重复的对象不要在用drawImage时缩放图像使用多层画布去画一个复杂的场景用CSS设置大的背景图不需要透明度时关闭alpha通道渲染画布中的不同点，而非整个新状态...写法注意点： id选择器肯定是最快，但是不要在ID选择器使用的同时再使用标签或类选择器了不要使用类选择器时用标签选择器特别是for循环中js编写html代码时直接定义样式类名到所需要作用的元素，之后尽量用一个选择器写样式...，可以大幅提高渲染效率如果明确dom结构，优先使用子选择器，减少后代选择器使用使用类选择器替代后代选择器和子选择器避免使用通配符选择器（*）和属性选择器 (2) 谨慎使用 CSS3 特性 CSS3

7693 0

CSS入门？一篇就够了！

（中）外部样式表完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点（多） CSS样式规则使用HTML时，需要遵从一定的规范。...font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。...需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。...为什么要用定位？那么定位，最长运用的场景再那里呢？来看几幅图片，你一定会有感悟！如图，小黄色块可以再图片上移动：元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。...">我是小白我是小手我是移动 <li style="cursor

5.2K2 0

CSS——06扩展：高级

:default">我是小白我是小手我是移动 CSS精灵技术（sprite) 重点 5.1 为什么需要精灵技术图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...为什么需要使用精灵图技术：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。...实际上本质就是定位，哪一个大图，如何通过定位的形式把，大图里包含的小图定位到想要的位置出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。...你就知道 css 三角是怎么来的了, 做法如下：我们用css 边框可以模拟三角效果宽度高度为0 我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了

4.7K4 0

CSS 从大图中选取部分区域作为目标图标

1、图片素材图片素材如下（大小：137px * 264px），图中从上到下，连续存放了两张100px * 100px的图 2、HTML代码 html代码如下： .icon { width:100px; /*--设置背景图显示区域宽度--*/ height:100px;/*--设置背景图显示区域高度--*/..."> .icon { width:100px; /*--设置背景图显示区域宽度--*/ height:100px;/*--设置背景图显示区域高度...背景图片从所在容器左上角的地方向上移动100px，超出的部分隐藏。 background-position: 20 18x;。...参考链接： http://www.w3school.com.cn/css/css_background.asp http://www.w3school.com.cn/cssref/pr_background-position.asp

1.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭