CSS background属性

最新推荐文章于 2024-05-08 16:04:38 发布

卑微小童

最新推荐文章于 2024-05-08 16:04:38 发布

阅读量418

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43519121/article/details/107308621

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS background属性

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

可以设置如下属性：

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

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

可能的值

在这里插入图片描述

background-color

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

background-positiion

在这里插入图片描述
注意其中通过center cnetr和设置50% 50%方式结果是相同的，而且都是相对图片的中心

background-size

在这里插入图片描述

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

background-repeat

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

默认地，背景图像在水平和垂直方向上重复。
在这里插入图片描述

background-origin

对图片的放置区域进行设置
在这里插入图片描述

background-clip

background-clip 属性规定背景的绘制区域。
在这里插入图片描述

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>

效果图
在这里插入图片描述

卑微小童

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS background属性

CSS background属性background 简写属性在一个声明中设置所有的背景属性。可以设置如下属性：background-colorbackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachmentbackground-image如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url(‘smile
复制链接

扫一扫