js学习-CSS3中新增的背景属性

最新推荐文章于 2021-07-29 00:54:00 发布

kaka_hikun

最新推荐文章于 2021-07-29 00:54:00 发布

阅读量116

点赞数

分类专栏： js学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48235555/article/details/106577485

版权

js学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1、background-clip属性
background-clip: border-box； --默认
background-clip: padding-box; --padding以外的裁剪掉
background-clip: content-box; --content以外的裁剪掉
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3中新增的background-clip属性</title>
    <style>
        div{
            background-color: #000;
            width: 300px;
            height: 150px;
            border: dashed 10px #a186a0;
            padding: 30px;
            background-clip: content-box;
        }
    </style>
</head>
<body>
<h1>CSS3中新增的background-clip属性</h1>
<div>CSS3中新增的background-clip属性</div>
</body>
</html>

content-box显示结果：
在这里插入图片描述
padding-box显示结果：

border-box显示结果：

2、background-origin属性
background-origin: border-box; --border的外边缘开始
background-origin: padding-box; --默认，从padding的外边缘（border的内边缘）开始显示背景图片
background-origin: content-box; --content的外边缘开始
3、background-size属性
background-size: auto; --默认
background-size: < length >; --可以设置图片的长宽
background-size: < percentage >; --以百分比形式缩放
background-size: cover; --主要用于图片放大到适合容器的大小
background-size: contain; --主要用于图片缩小到适合容器大小

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3中新增的 background-origin属性</title>
    <style>
        div{
            width: 600px;
            height: 300px;
            background-image: url("xxx.png");
            background-repeat: no-repeat;
            border: dash8ed 30px #a16a0;
            padding: 30px;
            background-origin: content-box;
            background-size: contain;
        }
    </style>
</head>
<body>
<h1> background-origin</h1>
<div id="div"></div>
</body>
</html>

4、在一个元素中显示多个背景图片
background-image: url(xxx3.jpg); url(xxx2.jpg); url(xxx1.jpg);
按照这个顺序，xxx1.jpg是在网页的最下层，xxx3.jpg在网页的最上层。如果xxx1.jpg是背景，xxx3.jpg就不会被挡住。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在一个元素中显示多个背景图像</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            width: 1000px;
            height: 800px;
            background-image: url("bj4.png"),url("bj3.png"),url("bj2.png"),url("bj1.jpg");
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
<h1>在一个元素中显示多个背景图像</h1>
<div> </div>
</body>
</html>

kaka_hikun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习-CSS3中新增的背景属性

1、background-clip属性background-clip: border-box； --默认background-clip: padding-box; --padding以外的裁剪掉background-clip: content-box; --content以外的裁剪掉<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title&g
复制链接

扫一扫