CSS3新增背景属性(四)

CSS3新增背景属性

1 background-origin

设置背景图原点起始位置:

  • padding-box:默认值从padding区域开始显示背景图像;
  • border-box:从border区域开始显示背景图像;
  • content-box:从content区域开始显示背景图像。
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>background-origin</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            padding: 30px;
            border: 20px dashed red;
            background-color: darkkhaki;
            margin: 0 auto;
            /* 引入图片 */
            background-image: url("../../1、CSS选择器/imgs/fengjing.png");
            /* 图片是否重复 */
            background-repeat: no-repeat;
            /* 图片起始位置 */
            background-origin: content-box;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
1 background-clip

裁剪背景图。

  • padding-box:从padding区域开始向外裁剪背景图像;
  • border-box:默认值,从border区域开始向外裁剪背景图像;
  • content-box:从content区域开始向外裁剪背景图像;
  • text:背景图只呈现在文字上,需要加上-webkit-,而且要将文字设置为透明色。
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>background-clip</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            padding: 30px;
            border: 20px dashed red;
            background-color: black;
            margin: 0 auto;
            background-image: url("../images/bg.jpg");
            background-repeat: no-repeat;
            background-origin: padding-box;

            font-size: 100px;
            text-align: center;
            line-height: 400px;
            color: transparent;

            /* -webkit-background-clip: text; */
            background-clip: content-box;
        }
    </style>
    </style>
</head>

<body>
    <div>文字</div>
</body>

</html>
3 background-size

设置背景图尺寸。

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>background-size</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            border: 1px solid black;
            background-image: url("../images/bg.jpg");
            background-repeat: no-repeat;

            /* 用长度指定背景图片大小 */
            /* background-size: 400px 400px; */
            /* 用百分比指定图片大小  */
            /* background-size: 100% 100%; */
            /* 默认值,背景真实大小 */
            /* background-size: auto; */
            /* 等比缩放,使背景图片完全在容器内,可能导致一部分容器没有图片,以先满足的图片为准 */
            /* background-size: contain; */
            /* 等比缩放,使图片尽可能覆盖容器,有时图片可能显示不完整 */
            background-size: cover;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
4 background复合属性
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>background-origin</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            padding: 30px;
            border: 20px dashed red;
            margin: 0 auto;

            /* background: color url repeat position / size orgin clip */
            background: rgb(146, 97, 97) url("../images/bg.jpg") 5px 5px / 100% 100% border-box content-box;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
5 多背景图
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>多背景图</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            border: 1px solid black;

            background: url("../images/touxiang.png") no-repeat top left/ 20% 20%,
                url("../images/touxiang.png") no-repeat top right/ 20% 20%,
                url("../images/touxiang.png") no-repeat bottom left/ 20% 20%,
                url("../images/touxiang.png") no-repeat bottom right/ 20% 20%;
        }
    </style>
</head>

<body>
    <div></div>
</body>


</html>
相关推荐
程序猿阿伟6 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒8 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪17 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背20 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M30 分钟前
node.js第三方Express 框架
前端·javascript·node.js·express
盛夏绽放39 分钟前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳1 小时前
vue3:瀑布流
前端·javascript·vue.js
霍先生的虚拟宇宙网络2 小时前
webp 网页如何录屏?
开发语言·前端·javascript
彪8252 小时前
第十章 JavaScript的应用 习题
javascript·css·ecmascript·html5