CSS3 background

来源：互联网发布：mac最新系统版本10.13 编辑：程序博客网时间：2024/06/11 09:31

background多背景图片：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">            #div1 {background: url(img/billiard.png),url(img/medal.png) ;            background-size: 300px 300px;            width: 300px;height: 300px;        }    </style></head><body>    <div id="div1">    </div></body></html>

效果如图：
背景图片

background-origin:

background-origin 属性规定背景图片的定位区域
三个值：

padding-box:背景图片相对于内边距框来定位
border-box:背景图片相对于边框盒来定位
content-box:背景图片相对于内容框来定位

1.padding-box

<style type="text/css">    #div1 {        border: 30px dotted #eee;        padding:20px;width: 200px;height: 200px;background-image: url(img/trophy.png) ;        background-repeat: no-repeat;        background-size: 200px 200px;        background-origin: padding-box;    }</style>

效果如下图：这是从padding开始定位背景图片
这里写图片描述

2.border-box

<style type="text/css">    #div1 {        border: 30px dotted #999;        padding:20px;width: 200px;height: 200px;background-image: url(img/trophy.png) ;        background-repeat: no-repeat;        background-size: 200px 200px;        background-origin: border-box;    }</style>

背景效果如下：
这里写图片描述

3.content-box

<style type="text/css">    #div1 {        border: 3px dotted #999;        padding:20px;width: 200px;height: 200px;background-image: url(img/trophy.png) ;        background-repeat: no-repeat;        background-size: 200px 200px;        background-origin: content-box;    }</style>

这里写图片描述

background-clip

background-clip规定背景的绘制区域
有三个属性值：

border-box:背景被裁减到边框盒
padding-box:背景被裁减到内边框距
content-box:背景被裁减到内容框

1.border-box

<style type="text/css">    #div1 {        border: 30px dotted #999;        padding:20px;width: 200px;height: 200px;background-image: url(img/trophy.png) ;        background-repeat: no-repeat;        background-size: 200px 200px;        background-origin: border-box;        background-clip: border-box;    }</style>

效果图
这里写图片描述

2.padding-box

<style type="text/css">    #div1 {        border: 30px dotted #999;        padding:20px;width: 200px;height: 200px;background-image: url(img/trophy.png) ;        background-repeat: no-repeat;        background-size: 200px 200px;        background-origin: border-box;        background-clip: padding-box;    }</style>

效果图：
这里写图片描述

3.content-box

<style type="text/css">    #div1 {        border: 30px dotted #999;        padding:20px;width: 200px;height: 200px;background-image: url(img/trophy.png) ;        background-repeat: no-repeat;        background-size: 200px 200px;        background-origin: border-box;        background-clip: content-box;    }</style>

效果图：
这里写图片描述

阅读全文

0 0