css3背景

最新推荐文章于 2020-08-10 09:52:09 发布

passerby_Ai

最新推荐文章于 2020-08-10 09:52:09 发布

阅读量92

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/weixin_45736498/article/details/104814439

版权

CSS3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css3背景

在css3中背景也得到了加强。

background-image
我们可以一次性添加多张图片，不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        .box2{
            width: 1000px;
            height: 600px;
            background: url("../图片/01 (1).jpg") , url("../图片/01 (2).jpg");
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat
        }

    </style>
</head>
<body>
    <div class="box2">

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

background-size 属性
background-size指定背景图像的大小。
CSS3以前，背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。

background-Origin属性
background-Origin属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
语法
background-origin: padding-box|border-box|content-box;

值	描述
padding-box	背景图像相对于内边距框来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        div
        {
            border:1px solid black;
            padding:35px;
            background-image:url("../图片/01 (1).jpg");
            background-repeat:no-repeat;
            background-position:left;
        }
        #div1
        {
            background-origin:border-box;
        }
        #div2
        {
            background-origin:content-box;
        }
    </style>
</head>
<body>

<p>背景图像边界框的相对位置：</p>
<div id="div1">
    <span> Hello ,word</span>
</div>

<p>背景图像的相对位置的内容框：</p>
<div id="div2">
    <span> Hello ,html\css</span>
</div>

</body>
</html>>

background-clip
用来剪切图片
语法
background-clip: border-box|padding-box|content-box;

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

passerby_Ai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3背景

css3背景在css3中背景也得到了加强。background-image我们可以一次性添加多张图片，不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景&...
复制链接

扫一扫

专栏目录