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>
相关推荐
王哲晓11 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_41114 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v16 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云26 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058728 分钟前
web端手机录音
前端
齐 飞34 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试