文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

【原创】CSS处理文本以及背景图片

属性值inherit和lighter：细体显示 属性值normal：默认显示 5.文本样式：font-style属性 属性值normal：默认显示 属性值italic：斜体显示 6.标签透明度...line-through：在文本中间有一根横线（类似的标签是del标签） none：取消文本装饰（重要）(常用于取消a标签的下划线) 9.文本上下居中： 设置line-height属性值和当前背景高度值一致...2.文本溢出处理方式(overflow属性)： 属性值visible：文本默认显示，溢出显示 属性值hidden：溢出文本自动隐藏 属性值scroll：自动给横向和纵向添加滚动条（无论是否溢出，都会添加横线和纵向的滚动条...） 属性值auto：哪个方向文本溢出，则就在哪个方向添加滚动条。...background-size属性： a)通过长度单位来设置 第一个参数：设置图片的宽度 第二个参数：设置图片的高度 注意：使用长度单位来设置背景图片大小

1.2K20

【CSS3】css开篇基础（2）

行高的上空隙和下空隙把文字挤到中问了,是如果行高小于盒子髙度,文字会偏上,如果行高大于盒子高度,则文字偏下。...方位名词关键字 水平关键字: left, center, right 垂直关键字: top, center, bottom 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top...和 top left 效果一致 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐 当参数是精确单位，精确单位一般指的是百分比或者px 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是...，则第一个值是x坐标，第二个值是y坐标 背景图片固定 background-attachment 属性用于指定背景图像是否随着页面内容的滚动而滚动。...从而节约代码量当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为: background:背景颜色, 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

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

    深入常用CSS声明(一) —— Background

    scroll 背景图片相对于图片容器滚动，不随内容滚动 local 如果容器内容有滚动情况，背景图片相对于内容滚动，而与包含它的容器无关 这其中要理解的可能就是scroll和local的区别。...简单来说就是包含它的容器有没有设置固定尺寸，如果没有固定尺寸，那么内容区域和容器区域其实是相同的，这样scroll和local的表现其实相同；如果容器设置了一定的高度，此时内容出现了滚动条，然后我们在底部设置了一张背景图...默认的属性的值为border-box。这里重点说一下content-box（至少我工作中用到了?）...具体像素，或者百分比) 两个值，都为数值(具体像素，或者百分比) 如果只有一个值的情况下：如果设置了left或者right，表示背景图片距离容器水平的距离，竖直方向为容器的50%。...如果设置为两个值的情况下， 第一个表示水平方向的定位，第二个表示竖直方向的定位： 两个都是固定值，这点按照字面意义理解就好 一个固定，一个为具体数值，数值如果为具体值：代表具体的定位，如果为百分比，则计算为

    2.4K50

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

    : pointer;background-attachment用来设置背景图片是否随页面一起滚动可选值：不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素background-attachment...: fixed;scroll，默认值，背景图片随着窗口滚动fixed，背景图片会固定在某一位置，不随页面滚动背景图像偏移, 如下: 水平(宽度.左右平移) 垂直(高度.上下)background-position...: -50px -50px;背景图片默认是贴着元素的左上角显示通过background-position可以调整背景图片在元素中的位置 可选值：该属性可以使用 top right left bottom...center中的两个值来指定一个背景图片的位置top left 左上bottom right 右下如果只给出一个值，则第二个值默认是center，也可以直接指定两个偏移量 第一个值是水平偏移量如果指定的是一个正值...，则图片会向右移动指定的像素如果指定的是一个负值，则图片会向左移动指定的像素 第二个是垂直偏移量如果指定的是一个正值，则图片会向下移动指定的像素如果指定的是一个负值，则图片会向上移动指定的像素css处理文字不换行

    21.4K10

    【CSS】CSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图片平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★

    , 都是左上角 ; 设置一个值 : 如果 只设置了一个方位值 , 那么另外一个默认居中对齐 , 如 : 设置了 left , 则垂直方向居中对齐 ; 设置了 top , 则水平方向居中对齐...; 坐标设置 : 如果 设置的是 length 长度坐标 , 则 第一个数值是 x 坐标 , 第二个数值是 y 坐标 ; 设置了一个值 : 如果 只设置了一个坐标值 , 那么该设置为 x 坐标设置..., 垂直方向默认居中设置 ; 同时设置放位和坐标 : 第一个值默认是 x 坐标 , 第二个值为 y 坐标 ; 5、超大背景图片设置 网页背景兼容问题 在网站开发时 , 经常遇到 网站首页使用超大背景图片显示..., 只能显示部分内容 , 这里建议将核心内容放在中心位置 ; 如果 电脑分辨率高于图片分辨率 , 则显示全部内容 , 并且外面还有空白边框存在 ; 超大背景图片推荐定位 因此这里要设置图片背景的位置...背景图片 , 平铺模式 , 定位方式 , 附着方式 等 , 下面是一个完整的图片背景设置的代码 , 代码很繁琐 ; body { /* 设置一个足够高的高度, 让页面滚动起来 */ height

    8.3K10

    css入门（5）

    image.png 如上图，使用background-attachment属性设置背景图像固定不动，然后你拖动浏览器滚动条的时候会惊奇发现，图像在固定在浏览器的某个位置，而不随滚动条滚动而变化！...，元素要有一定的宽度和高度，背景图片才会显示出来。...在上面例子中，如果我们没有id="div1"的元素设置高度，则在浏览器预览效果如下： image.png 这样的话，背景图片就无法完整地显示出来了。...第二个div元素background-repeat属性值为“repeat-x”，因此背景图片会在水平方向（x轴）平铺。...第三个div元素background-repeat属性值为“repeat-y”，因此背景图片会在垂直方向（y轴）平铺 大家可能对hr元素的属性设置很奇怪，为什么设置hr的border-color属性值为

    1.4K30

    css属性及定位操作

    如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。...background-image: url('1.jpg'); 背景图片的特殊示例： 　　需求介绍：使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。...scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。...在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 <!

    3.4K50

    CSS背景缩写、简写详细

    no-clip表示不裁切，和参数border-box显示同样的效果。 padding-box填充padding和内容区域。 backgroud-clip默认值为border-box。 ?...background-size取值： background-size:400px 300px 这表示设置背景图片的高度和宽度。第一个值设置宽度，第二个值设置高度。...如果只设置一个值，则第二个值会被设置为 “auto”，和图片的尺寸定义类似。 background-size:90% 80% 这表示以父元素的百分比来设置背景图片的宽度和高度。...第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。 background-size:cover 这表示把背景图片扩展至足够大，使图片完全覆盖背景区域。...这种情况下背景图片可能有一部分无法显示在区域中。 background-size:contain 这表示把图片扩展或拉伸至最大尺寸，以使其宽度和高度完全适应内容区域。

    2.9K10

    6-css样式

    背景颜色background-color 背景颜色的值可以是英文，可以是十六进制颜色值，可以是rgb 背景图片background-image 背景图片的大小可以和容器大小不一样 背景图片不会占位 如果容器大...，背景图片小，背景图片会平铺 铺满整个容器 背景图片位置background-position 背景图片定位的值是两个单位，分别代表坐标x,y轴 背景图片定位的值可以是应为left,right,top,...设置当对象的内容超过其指定高度及宽度时如何显示内容 visible默认值，内容不会被修剪，会呈现在元素框之外 hidden内容会被修剪，并且其余内容是不可见的 scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容...auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口 position:absolute div{ width: 200px; height: 200px; border

    2.6K20

    【前端】CSS背景属性详解

    : repeat-x; /* 仅在水平方向平铺 */ background-repeat: repeat-y; /* 仅在垂直方向平铺 */ 如果想要让背景图片只显示一次而不进行重复，可以使用 no-repeat...而对于 LOGO 之类的装饰性图片，则通常设置为 no-repeat。...如果只设置一个值，则另一个值默认居中对齐。 4.2 位置值的选择 background-position 可以灵活地选择相对单位（如百分比）或绝对单位（如像素）。...在这个模式下，背景图片会按比例缩放并裁剪到适应背景区域。 contain 则适合需要完整显示整个图片的场景，例如产品图片展示。...9.2 使用简写的场景 在日常开发中，如果一个元素需要设置多种背景属性，使用简写可以大大提高代码的可读性。例如，为按钮设置背景颜色、背景图片、图片平铺和位置等时，简写可以减少代码量，避免重复。

    98710

    css基础系列

    高度： height: 长度值|百分比|auto 最大高度: max-height: 长度值|百分比|auto 最小高度: min-height:长度值|百分比|auto ?...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-attachment: scroll | fixed scroll:随着滚动条滚动，fixed:背景图片不会移动 背景图片定位 background-position

    2.3K40

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

    行高和高度的三种关系 如果 行高 等 高度 文字会 垂直居中 如果行高 大于 高度 文字会 偏下 如果行高小于高度 文字会 偏上 4....如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致 如果只指定了一个方位名词，另一个值默认居中对齐。...如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是...x坐标，第二个值是y坐标 实际工作用的最多的，就是背景图片居中对齐了。...精确数值单位，则必须按照先X 后Y 的写法 background-attachment 背景固定还是滚动 scroll/fixed 背景简写 更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

    2.5K20

    【网页前端】CSS进阶之元素的背景以及清除浏览器默认样式

    格式： background-image : url ( "图片路径" ); 例如：某个小狗爪子图片 ，作为背景图片引入一个长宽 25 的 DIV 标签中， 因为图片太小，.../img/itcast.png" ); 效果图： 同时显示两张背景图片 注意：一般我们仅显示一张背景图片即可，如需显示多张，可以用逗号分隔。.../img/itcast.png" ); 精确定位写法： 注意事项 1 、 如果多张背景图片仅写 一对位置值，该位置值同时作用多张背景图片 2、 如果仅指定了 一个位置值，另一个位置值默认为...格式： background-size : 宽度 高度 ; 注意：如果要为多张图片同时设置尺寸，可以用逗号分隔（若无逗号分隔，就是为多张图片同时设 置） 3.5 背景附着设置 有时当元素过大...，背景图片不够长时， 滚动页面，用户体验会比较差。

    1.6K40

    【前端开发之CSS】（四）CSS 常用元素属性宝典（下）：背景与圆角进阶指南，让页面颜值飙升！

    1.2.2 基础用法示例 .bgi-demo { width: 800px; height: 500px; /* 必须设置高度，否则元素高度为0，背景图片无法显示 */ background-image...: url("rose.jpg"); /* 背景图片 */ } ⚠️ 注意：背景图片默认会覆盖在背景颜色上方，如果图片有透明区域，会显示出下方的背景颜色。...如果只设置背景图片而不设置元素高度，元素会被内容撑开（若没有内容则高度为 0），导致背景图片无法显示，因此务必给元素指定高度或确保元素有足够内容。...border-radius的值为元素宽度和高度的一半，或直接设置为50%。...如果元素设置了背景图片，且图片需要跟随圆角显示（不超出圆角范围），需要给元素添加overflow: hidden属性，否则图片会超出圆角，显示为直角。

    22210

    从零开始学 Web 之 CSS3（三）渐变，background属性

    默认为ellipse， ​如果元素宽高相同为正方形，则ellipse和circle显示一样； 如果元素宽高不相同，默认效果为 ellipse。...*/ local与scroll的区别：当滚动的是当前盒子（div）里面的内容的时候， local:背景图片会跟随内容一起滚动； scroll:背景图片不会跟随内容一起滚动。.../*设置背景图片的大小：宽度/高度 宽度/auto(保持比例自动缩放)*/ background-size: 100px 50px; background-size: 100px; /*设置百分比...，如果背景区域不足以包含所有背景图片，图片内容会溢出 1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见 2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容的溢出...2.4、案例：精灵图的使用 需求：为一个块元素设置精灵图背景，精灵图很小，但是需要更大的展示区域，能够以更大的范围响应用户的需要，但是只需要显示指定的背景图片。 <!

    2.5K10

    寒假提升 ｜ Day6 CSS 第四部分

    默写出display常见的值，并且说出对应的特性，并且写出测试案例 block：让元素显示为块级元素;可以让元素独占一行,可以设置宽度和高度,高度默认由内容决定 inline：让元素显示为行内级元素 ;...背景设置 3.1. background-image background-image用于设置元素的背景图片 会盖在(不是覆盖) background-color的上面 如果设置了多张图片 设置的第一张图片将显示在最上面...，其他图片按顺序层叠在下面 注意:如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的 3.2. background-repeat background-repeat 用于设置背景图片是否要平铺...用于设置背景图片的大小 auto:默认值, 以背景图本身大小显示 cover:缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见 contain:缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比...如果一个元素拥有滚动机制，背景将会随着元素的内容滚动. fixed:此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

    1.7K20

    【CSS】背景样式：background

    hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。 rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。...背景颜色为透明。 inherit 规定应该从父元素继承 background-color 属性的设置。 background-image 设置背景图片。...div{ background-size:80px 60px; } background-size 值 作用 length 设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。...如果只设置一个值，则第二个值会被设置为 "auto"。 percentage 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。...如果只设置一个值，则第二个值会被设置为 "auto"。 cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。

    2.1K30

    css基础第二弹

    就可以让文字在当前盒子内垂直居中 简单理解: 行高的上空隙和下空隙把文字挤到中间了 如果行高小于盒子高度,文字会偏上 如果行高大于盒子高度,则文字偏下 四、css的背景 通过 CSS 背景属性，可以给页面元素添加背景样式...可以使用 方位名词 或者 精确单位 其他说明： 1、参数是方位名词 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致 如果只指定了一个方位名词...，另一个值省略，则第二个值默认居中对齐 2、参数是精确单位 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标 ​如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中...3、参数是混合单位 ​如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标 5、背景图片固定 样式名称： background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动...6、背景样式合写 背景合写样式： background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; 使用方式： 7、背景色半透明 CSS3 提供了背景颜色半透明的效果。

    1.4K10

    css基础第二弹

    就可以让文字在当前盒子内垂直居中 简单理解: 行高的上空隙和下空隙把文字挤到中间了 如果行高小于盒子高度,文字会偏上 如果行高大于盒子高度,则文字偏下 四、css的背景 通过 CSS 背景属性，可以给页面元素添加背景样式...可以使用 方位名词 或者 精确单位 其他说明： 1、参数是方位名词 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致 如果只指定了一个方位名词，...另一个值省略，则第二个值默认居中对齐 2、参数是精确单位 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中 3、...参数是混合单位 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标 5、背景图片固定 样式名称： background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动...6、背景样式合写 背景合写样式： html 代码: background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; 使用方式： 7、背景色半透明 CSS3 提供了背景颜色半透明的效果

    43310
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券