文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【CSS】盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )

插入图片 css...---- 1、简介 背景图片 : 设置背景图片方式 : 在 CSS 中 , 为 盒子 设置 background 属性 , 设置背景图片 ; /* 设置图片背景 */ background:...pink url(images/image.jpg) no-repeat; 背景图片适用场景 : 显示 小图标 或 超大背景 , 一般都使用 背景图片 的方式 展示图片 ; 设置背景图片大小 : 通过设置...background-position: 50px 50px; } 2、代码示例 在该示例中 , 使用 background: pink url(images/image.jpg) no-repeat; CSS...type="text/css"> div { /* 设置盒子大小 */ width: 400px; height: 400px; /* 设置图片背景 */ background

1.7K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    移动web开发_流式布局

    总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。 1.2 手机屏幕的现状 移动端设备屏幕尺寸非常多，碎片化严重。...: 背景图片宽度 背景图片高度; 单位： 长度|百分比|cover|contain; cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。...通过判断设备，如果是移动设备打开，则跳到移动端页面。...同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可 2.移动端公共样式 移动端 CSS 初始化推荐使用 normalize.css/ Normalize.css：保护了有价值的默认值 Normalize.css...移动端大量使用 CSS3盒子模型box-sizin 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding CSS3盒子模型： 盒子的宽度= CSS中设置的宽度

    1.3K10

    前端成神之路-移动web开发_流式布局

    总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。 1.2 手机屏幕的现状 移动端设备屏幕尺寸非常多，碎片化严重。...: 背景图片宽度 背景图片高度; 单位： 长度|百分比|cover|contain; cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。...通过判断设备，如果是移动设备打开，则跳到移动端页面。 也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站 京东pc端： ? 京东移动端： ?...同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可 2.移动端公共样式 移动端 CSS 初始化推荐使用 normalize.css/ Normalize.css：保护了有价值的默认值 Normalize.css...移动端大量使用 CSS3盒子模型box-sizin 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding CSS3盒子模型： 盒子的宽度= CSS中设置的宽度

    1.6K21

    CSS背景图像，镜像翻转、缩放、背景偏移与定位、文字溢出处理

    CSS下镜像翻转（水平/垂直翻转）两种写法【方法一】利用css动画属性rotate旋转来实现：/* 方法一 */.mirrorRotateLevel { transform: rotateY(180deg...背景图片 相关CSS背景图片background:url(logo.png)no-repeat;背景图片大小缩放: 宽 高background-size:100%100%;绝对定位position:absolute...: -50px -50px;背景图片默认是贴着元素的左上角显示通过background-position可以调整背景图片在元素中的位置 可选值：该属性可以使用 top right left bottom...center中的两个值来指定一个背景图片的位置top left 左上bottom right 右下如果只给出一个值，则第二个值默认是center，也可以直接指定两个偏移量 第一个值是水平偏移量如果指定的是一个正值...，则图片会向右移动指定的像素如果指定的是一个负值，则图片会向左移动指定的像素 第二个是垂直偏移量如果指定的是一个正值，则图片会向下移动指定的像素如果指定的是一个负值，则图片会向上移动指定的像素css处理文字不换行

    18.4K10

    移动web开发问题和优化小结

    2.Meta标签 页面在手机上显示时，增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户通过点击或者缩放等操作对屏幕放大浏览。..." name="format-detection" /> 禁止android上自动识别邮箱 下面两个是针对...如果是复杂的动画可以使用css3+js（或者html5+css3+js）配合开发，效果只有想不到，没有做不到。...background：以css背景图存在的图片background会等到结构加载完成（网页的内容全部显示以后）才开始加载 也就是说，网页会先加载标签img的内容，再加载背景图片background引用的图片...而用background来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，网页内容能正常浏览，但是看不到背景图片。至于这两种，大家按照习惯，需求等权重因素选择！

    2.1K21

    移动端开发总结

    2.Meta标签 页面在手机上显示时，增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户通过点击或者缩放等操作对屏幕放大浏览。...no" name="format-detection"/> 禁止android上自动识别邮箱 下面两个是针对...附上叶小钗大神的原文–手持设备点击响应速度，鼠标事件与touch事件的那些事 6.图片优化 6-1.base64编码图片替换url图片 这个应该没什么好解释的，就是能不发请求的就不要发，对于一些小图标（...background：以css背景图存在的图片background会等到结构加载完成（网页的内容全部显示以后）才开始加载 也就是说，网页会先加载标签img的内容，再加载背景图片background引用的图片...而用background来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，网页内容能正常浏览，但是看不到背景图片。至于这两种，大家按照习惯，需求等权重因素选择！

    2.7K10

    HTMLayout 界面贴图技术

    概述 ---- 在HTMLayout中支持在CSS中使用background属性指定背景图片, 并扩展支持更多的功能, 例如九宫格切片贴图....CSS标准中的背景属性 ---- 首先我们简单回顾一下CSS标准语法中与背景图片有关的一些属性: Properties 属性 CSS Version 版本 Inherit From Parent 继承性...HTMLayout CSS 贴图属性 ---- 前景图片一般位于背景图片前面，即使不是同一个节点对象， 例如 div对象#A包含div节点#B,那么#A的前景图片在#B的背景图片前面( 但是#A的背景图片仍然在..., 则图片向左移动指定的距离, 也就是说页面右侧有指定大小的空间没有背景图片 ****ground-position-top 或 ****ground-position-bottom 定义图片的顶部偏移...or ****ground-position-bottom 定义开始铺排的纵坐标,这两个属性不能同时使用 如果指定了  ****ground-position-bottom 并且是一个正数, 则图片向上移动指定的距离

    2.5K40

    Web网页响应式布局.md

    在移动设备上设置原始大小显示和是否缩放的声，是在页面的头部\之间加上下面这样的语句∶ /** 设置默认的宽度为设备的宽度 **/ 背景图片，我们可以准备多张不同尺寸的图片，然后在各自的媒体查询样式中结合结合一些“min-width，min-height,max-width,max-height等样式属性使用对应的图片背景即可...不适合响应式的原因：虽然这种方法提供了非常精确的大小控制，但它却与我们需要的弹性和响应式相违背的，因为由于CSS层叠样式表，父元素通过继承的特性将会把尺寸传递到子元素中。...5) 响应式网站的设计流程 当产品经理提出产品功能移动化的需求时，通常的网站设计流程如下： 第一步：确定需要兼容的设备类型、屏幕尺寸。 第二步：制作线框原型。...（由于移动设备的屏幕像素密度与传统电脑屏幕不同，需要保证内容文字的可读性、控件可点击区域的面积等) 第五步：前端实现。

    1.6K20

    Web网页响应式布局

    在移动设备上设置原始大小显示和是否缩放的声，是在页面的头部\之间加上下面这样的语句∶ /** 设置默认的宽度为设备的宽度 **/ 背景图片，我们可以准备多张不同尺寸的图片，然后在各自的媒体查询样式中结合结合一些“min-width，min-height,max-width,max-height等样式属性使用对应的图片背景即可...不适合响应式的原因：虽然这种方法提供了非常精确的大小控制，但它却与我们需要的弹性和响应式相违背的，因为由于CSS层叠样式表，父元素通过继承的特性将会把尺寸传递到子元素中。...5) 响应式网站的设计流程 当产品经理提出产品功能移动化的需求时，通常的网站设计流程如下： 第一步：确定需要兼容的设备类型、屏幕尺寸。 第二步：制作线框原型。...（由于移动设备的屏幕像素密度与传统电脑屏幕不同，需要保证内容文字的可读性、控件可点击区域的面积等) 第五步：前端实现。

    1.8K30

    第95天：CSS3 边框、背景和文字效果

    border-image：url(border.png) 30 30 round; 　　2、CSS3背景： background-size： 属性规定背景图片的尺寸。...在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。...2D转换： 　　transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。...50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。...matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。 　　5、CSS3 3D转换： rotateX()：元素围绕其 X 轴以给定的度数进行旋转。

    1.2K20

    css基础系列

    image.png 背景图片重复问题： 设置元素的背景图片重复方式： background-repeat: repeat | no-repeat | repeat-x | repeat-y 背景图片显示方式...： 设置元素的背景图片的显示方式： background-attachment: scroll | fixed scroll: 默认值，背景图片随滚动条滚动 fixed:当页面的其余部分滚动时，背景图片不会移动...背景图片定位： 设置元素的背景图片的位置： background-position:百分比|值|top|right|bottom|left|center ?...背景颜色，设置元素的背景颜色 background-color:颜色 | transparent 背景图片 设置元素的背景图片 background-image: url | none 背景图片重复...: scroll | fixed scroll:随着滚动条滚动，fixed:背景图片不会移动 背景图片定位 background-position: 百分比 | 值 | top | right | bottom

    1.8K40

    常用的不易记忆的css自定义代码

    在制作页面时，经常会遇到需要自定义一些标签的默认行为(如：input的占位符等)，但这些默认的设置的css一般比较难记住,所以有必要自己做一下记录。下面是我经常用到的一些重设默认行为的css。...需要注意的是不同浏览器写法不同： 都要加上各自浏览器的前缀(如 -webkit- )； firefox的 placeholder 的前面没有 input- ； firefox与chrome都是 :: 两个冒号...，而IE则是一个 : ; 低版本的浏览器与新版本浏览器可能写法不同； 2、下拉框的小三角 select 标签会出现小三角,通常这个小三角我都会去掉，或者用背景图片的方式替换为符合要求的样子。...3、input[type=number]右边的spinners nput[type=number] 通常用在移动端设备上，浏览器会识别number输入类型，然后改变数字键盘来适应它。...webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 4、-webkit-tap-highlight-color 在移动端浏览器上

    70420

    Web - CSS3浮动定位与背景样式

    位置描述词:left向左边移动的距离，right向右边移动的距离，top向上边移动的距离，bottom向下面移动的距离，值可以为负数，既往相反方向移动。...背景图片css中使用background-image属性用来设置背景图片，图片路径要写到url圆括号中，可以是相对路径，也可以是http://开头的绝对路径。...box2 { background-image: url("images/bg.jpg");}背景图片位置background-position属性可以设置背景图片出现在盒子的什么位置。...contain和cover是两个特殊的属性，contain表示将背景图片智能改变尺寸以容纳到盒子里，cover表示将背景图片智能改变尺寸以撑满盒子。...斜切变形css3样式中使用transform属性的值设置为skew,即可实现缩放变形，skew有两个参数，分别是x斜切角度，y斜切角度。.

    9410

    响应式布局入门

    目前已经越来越多的站点以及wap站点使用响应式设计，因为大屏幕的移动设备越来越普及。而自适应布局已经无法胜任各种浏览需求。...css2的时期有一个不是很常用的media type，他拥有比如aural（声音）braille（触摸）print（打印）handheld（移动设备）等等十种媒体类型，（附加媒体类型详细http://www.w3...现在CSS3有了个更为实用的 media query。而移动终端的浏览器基本已经完全支持了css3.他可以为你获取各种终端的数据。 先举个例子，大家看这个demo。...比如上面的demo，如果你用iphone4以上的苹果手机来看，中间的背景图片应该是显示“2.0像素比”。...现在终端设备越来越多，分辨率也越来越五花八门，但是为了用户体验，再多也要去兼容他呀~嘿嘿，我们下次见！ ?

    1.7K50

    移动端基础

    视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...多倍图 物理像素比会放大图片倍数，会造成图片模糊 在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题 背景图片注意缩放问题 3.3二倍精灵图 在firework...通过设备判断，如果是移动端打开，则自动跳转到移动端页面。...2.css初始化 normalize.css 移动端CSS初始化推荐使用normalize.css 保护了有价值的默认值 修复了浏览器bug 是模块化的 拥有详细文档 官网地址:...http://necolas.github.io/normalize.css/

    1.4K31

    IT课程 CSS基础 023_图片、背景

    -- 左上10px，右上20px，右下15px，左下5px --> 效果： 图片阴影 在 CSS 中，你可以使用 box-shadow 属性为图片添加阴影效果。...-- 外阴影和内阴影效，使用 inset 关键字来指定内阴影--> 效果： 背景 在 CSS 中，背景是网页设计中常用的样式之一，用于设置元素的背景样式。...，可以是水平方向、垂直方向、同时在两个方向上或者不重复。...可用任何长度单位，第二个位置(即Y轴方向)如果不声明，默认是50%(两个位置都不设置的话默认0% 0%) 位置关键字（left/right/top/bottom/center），可单双使用（第二个关键字如果不声明默认是...scroll：背景图片随网页滚动而移动(默认) fixed：背景图片不会随网页滚动而移动 local： 背景图片会随着元素内容的滚动而滚动。

    10110

    CSS | 视差滚动 | 笔记

    : 长度值: 背景图片左上角 相对于 背景图片所在元素左上角 // 即 背景图片 左上角 与 容器左上角 对齐 // 依次为 左右 上下 background-position: 0 0;...// 背景图片 相对于 viewport 固定 background-attachment: fixed; // 背景图片尺寸: 铺满 background-size: cover;...height: 100vh 是如此接近伟大，但考虑到它在移动设备上的局限性，最好避免它。...CSS: background background-position 参考: background-position - CSS：层叠样式表 | MDN 注意: 当两个值时, 依次为 background-position...这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开， 就解决了上述的两个问题。 显示雪碧图的条件： 1. 一个设置好宽和高的容器 2.

    81521

    【CSS】CSS 精灵技术 Sprite ( 精灵技术需求 | CSS 精灵技术简介 | 代码示例 )

    精灵技术 , 可以有效提高网页加载技术 ; 二、CSS 精灵技术 ---- CSS 精灵技术 可以 将网页中的 背景图片 合成到一张 精灵图 中 , 网页元素 显示 精灵图 中的某个部位的小图 ; 建议使用...; 设置显示位置 : 设置背景图片显示位置 , 可以从指定 x , y 坐标位置开始显示 , 设置显示大小 : 同时也可以设置显示大小 , 为盒子设置背景图片 , 如果背景图片很大 , 超出盒子的部分不会显示...) no-repeat -157px -107px; margin: 100px; } 指定的图片在精灵图片中的位置是 157, 107 坐标 , 要想将该位置移动到左上角 , 需要向左移动...157 像素 , 向上移动 107 像素 ; 因此 background-position 属性设置为 -157px, -107px 即可 ; 三、CSS 精灵技术代码示例 ---- 使用下面的图片作为精灵图片...0 像素 , 向上移动 219 像素 , 即可达到上述要求 ; 为其设置 background-position 属性为 0 , -219 ; 代码示例 : <!

    85530
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券