CSS基础-background的那些属性

explorer_ddf 发布于2019-08-02 10:06 / 1635人阅读

摘要：的那些属性背景的意思常用的六个属性背景颜色背景图像图片位置图片是否重复图片定位，背景裁剪。当不存在数值的时候，顺序无所谓。疑问的复合属性如何写呢解答先考虑是否图片重复，在考虑位置。

background的那些属性

background:背景的意思
常用的六个属性

1.background-color:背景颜色
2.background-image:背景图像
3.background-position:图片位置
4.background-repeat:图片是否重复
5.background-attachment:图片定位（fixed，scroll）
6.background-clip: 背景裁剪。有三个属性值为
border-box（图片或者颜色从边框开始）;
padding-box（图片或者颜色从padding部分开始）;
content-box图片或者颜色从content部分开始）;

疑惑点1:图像和颜色到底是从边框开始的？还是从内容开始的？

解答：背景图像和颜色默认是从border开始铺上去的。如果没有border就从下一级开始。

运行效果图：

疑惑点2:如果想设置图像开始的位置怎么办？

解答：
background-clip: 背景裁剪。有三个属性值为
border-box（图片或者颜色从边框开始）;
padding-box（图片或者颜色从padding部分开始）;
content-box图片或者颜色从content部分开始）;

疑惑点3:background-position的属性值有那些写法？

    解答：定位是从border的左上角开始。background-position：x,y;

第一个值是距离左边的距离
第二个值是距离上边的距离
x:left,center,right
y:top,center,bottom

background-position：10px; 只有一个值时，默认第二个值是center
background-position：10px bottom;
background-position: bottom 10px ;当存在数值的时候，顺序写错则不显示。存在数值时顺序必须写对。要按照前面是x值，后面是y值来写。eg：background-position: 10px bottom ;才正确。
background-position: bottom right;当不存在数值的时候，顺序无所谓。

疑问4: background的复合属性如何写呢?
解答：background:先考虑是否图片重复，在考虑位置。




    
    Title
    








效果图为：

云服务器 GPU云服务器 css属性访问CSS属性 position属性，css 获取CSS属性值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52134.html

CSS基础-background的那些属性

摘要：的那些属性背景的意思常用的六个属性背景颜色背景图像图片位置图片是否重复图片定位，背景裁剪。当不存在数值的时候，顺序无所谓。疑问的复合属性如何写呢解答先考虑是否图片重复，在考虑位置。 background的那些属性 background:背景的意思常用的六个属性 1.background-color:背景颜色 2.background-image:背景图像 3.background-po...

venmos 2019-08-30 14:19 评论0 收藏0
HTML/CSS基础知识总结

摘要：控制表单控件的禁用状态。这个符号只有会识别渐进识别的方式，从总体中逐渐排除局部。接着，再次使用将和分离开来，这样已经独立识别。生成相对定位的元素，相对于其正常位置进行定位。元素不能用作语义用途以外的其他目的。 HTML、CSS部分要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发技术等 1.Doctype作用? ...

CoderStudy 2019-08-30 12:48 评论0 收藏0
HTML/CSS基础知识总结

摘要：控制表单控件的禁用状态。这个符号只有会识别渐进识别的方式，从总体中逐渐排除局部。接着，再次使用将和分离开来，这样已经独立识别。生成相对定位的元素，相对于其正常位置进行定位。元素不能用作语义用途以外的其他目的。 HTML、CSS部分要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发技术等 1.Doctype作用? ...

zhoutao 2019-08-01 15:06 评论0 收藏0
css魔幻属性跟进篇

摘要：中是这样定义的属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。其同样适用于设置属性为绝对定位或固定定位的内联元素。至于为什么，可以理解为内联元素没有盒模型，其高度由内容决定。白话：即上一篇我脑中飘来飘去的css魔幻属性自己的文章推出之后，这是自己写的第四篇CSS相关的文章，文章绝大部分是自己工作总结得来，另一部分是平日sf回答的与面试中向面试官交流学到的，都是一...

oogh 2019-08-30 14:16 评论0 收藏0