CSS3——背景

来源：互联网发布：乾隆审美知乎编辑：程序博客网时间：2024/06/06 17:02

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>背景属性</title><style>div {    width: 235px;    height: 230px;    float: left;    margin: 10px;    border-style: solid;    background-image: url(images/1.jpg);}.repeat{    background-size: 50%}</style></head><body>

    <div id="div1" style="background-color: #ffccaa;background-image: url()">        背景颜色：<br />background-color:#ffccaa    </div>

    <div style="background-image: url(images/1.jpg)">        背景图片：<br />background-image:url()    </div>

    <div style="background-size: 100px">        背景图片大小：<br />background-size:100px    </div>    <div style="background-size: 25%">        背景图片大小：<br />background-size:25%    </div>    <div style="background-size: cover">        背景图片大小：<br />background-size:cover        <br/>保持图片比例，缩放到刚好完全覆盖背景区域    </div>    <div style="background-size: contain">        背景图片大小：<br />background-size:contain        <br/>保持图片比例，缩放到宽或高正好适应背景区域    </div>

    <div class="repeat" style="background-repeat: no-repeat;">        背景图片重复：<br />background-repeat:no-repeat<br/>不重复    </div>    <div class="repeat" style="background-repeat: repeat;">        背景图片重复：<br />background-repeat:repeat<br/>水平垂直方向都重复    </div>    <div class="repeat" style="background-repeat: repeat-x;">        背景图片重复：<br />background-repeat:repeat-x<br/>水平方向重复    </div>    <div class="repeat" style="background-repeat: repeat-y;">        背景图片重复：<br />background-repeat:repeat-y<br/>垂直方向重复    </div>

</body></html>

这里写图片描述

背景图片位置background-position 描述 length 距离长度cm、mm、px等 percentage 百分比 center 居中 top 顶部居中 bottom 底部居中 left 左部居中 right 右部居中

background-origin用来决定background-position定位的参考位置

背景显示区域background-origin 描述 border 从border区域开始显示 padding 从padding区域开始显示 content 从content 区域开始显示

background-clip用来判断背景是否包含边框区域

背景图像裁剪区域background-clip 描述 border 从border区域开始显示 padding 从padding区域开始显示 content 从content 区域开始显示 no-clip 从边框区域外裁剪背景

背景复合属性：
background
属性顺序可以自由调换并且可以选择设定

0 0