欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS background属性

程序员文章站 2022-05-27 09:18:58
...

CSS background属性

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

  • background-color
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment
  • background-image

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。

可能的值

CSS background属性

  • background-color

background-color 属性设置元素的背景颜色。
元素背景的范围
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。很简单不多说

  • background-positiion

CSS background属性
注意其中通过center cnetr和设置50% 50%方式结果是相同的，而且都是相对图片的中心

  • background-size

CSS background属性

cover和contain的区别
cover:是使得图片在等比例条件下放大使其能够覆盖背景区域，拖欠不一定完整
contain：是使其放大到图片完整的条件下的最大图片大小，其图片是完整的

  • background-repeat

background-repeat 属性设置是否及如何重复背景图像。

默认地，背景图像在水平和垂直方向上重复。
CSS background属性

  • background-origin

对图片的放置区域进行设置
CSS background属性

  • background-clip

background-clip 属性规定背景的绘制区域。
CSS background属性

  • background-attachment

值 描述
scroll 默认值。背景图像会随着页面其余部分的滚动而移动
fixed 当页面的其余部分滚动时，背景图像不会移动

  • background-image

background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

值：url(…) 或者 none

实例

<!DOCTYPE html>
<html>

<head>
    <title>测试</title>
    <style type="text/css">
        div {
            height: 200px;
            width: 35%;
            background-color: tan;
            background-image: url(img/test.jpg);
            background-size: contain;
            background-repeat: no-repeat;
            margin: 20px;
            padding: 20px;
            border: red 10px solid;
            background-origin: content-box;
        }
    </style>
</head>

<body>
    <div>
        我是一个div
    </div>
    <br><br>
    <h1>我是原图片</h1>
    <img src="img/test.jpg" alt="" width="200px">
</body>

</html>

效果图
CSS background属性

相关标签： CSS

上一篇： 绝对absolute定位后，元素宽度问题

下一篇： 关于BFS和DFS的一些了解

推荐阅读