CSS3 背景

CSS3 背景

CSS3中包含几个新的背景属性,提供更大背景元素控制。

在本章您将了解以下背景属性:

  • background-image

  • background-size

  • background-origin

  • background-clip


CSS3 background-image属性

CSS3中可以通过background-image属性添加背景图片。

不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        #example1 {
            background-image: url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg), url(http://scimg.jb51.net/allimg/160822/103-160R21K405308.jpg);
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat;
            padding: 15px;
        }
    </style>
</head>
<body>
<div id="example1">
    <h1>正能量</h1>
    <p>你是否经常狠不下心来做事,对自己不够狠,对别人也不够狠。所以,你总是黏黏糊糊,总是不忍心去拒绝别人,总是下不了决心让自己过的更好,总是缠绵过往不能自拔……完了,优柔寡断的你,必须狠一次,否则你永远也活不出自己</p>
    <p>别为小小的委屈难过,人生在世,注定要受许多委屈。一个人越是成功,他所遭受的委屈也越多。要使自己的生命获得极值和炫彩,就不能太在乎委屈,不能让它们揪紧你的心灵、扰乱你的生活。你要学会一笑置之,超然待之,要学会转化势能。智者懂得隐忍,原谅周围的那些人,让我们在宽容中壮大。</p>
</div>
</body>
</html>

运行程序尝试一下


可以给不同的图片设置多个不同的属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        #example1 {
            background: url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg) right bottom no-repeat, url(http://scimg.jb51.net/allimg/160822/103-160R21K405308.jpg) left top repeat;
            padding: 15px;
        }
    </style>
</head>
<body>
<div id="example1">
    <h1>正能量</h1>
    <p>你是否经常狠不下心来做事,对自己不够狠,对别人也不够狠。所以,你总是黏黏糊糊,总是不忍心去拒绝别人,总是下不了决心让自己过的更好,总是缠绵过往不能自拔……完了,优柔寡断的你,必须狠一次,否则你永远也活不出自己</p>
    <p>别为小小的委屈难过,人生在世,注定要受许多委屈。一个人越是成功,他所遭受的委屈也越多。要使自己的生命获得极值和炫彩,就不能太在乎委屈,不能让它们揪紧你的心灵、扰乱你的生活。你要学会一笑置之,超然待之,要学会转化势能。智者懂得隐忍,原谅周围的那些人,让我们在宽容中壮大。</p>
</div>
</body>
</html>

运行程序尝试一下


CSS3 background-size 属性

background-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。

CSS3中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

你指定的大小是相对于父元素的宽度和高度的百分比的大小。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body
        {
            background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);
            background-size:80px 60px;
            background-repeat:no-repeat;
            padding-top:40px;
        }
    </style>
</head>
<body>
<p>人心灵的伤痛若无知己来抚慰,便会荒芜;人的欢乐若知己来共享,再多的快乐也是悲伤。知己之于人,本是必不可缺。一个人的痛苦要找人倾诉,一个人的愁绪要有人来排解。人若没有知己,心灵便是一片怎样的荒凉。</p>
<p>原始图片: <img src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg"  alt="Flowers" width="224" height="162"></p>
</body>
</html>

运行程序尝试一下


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
    </style>
</head>
<body>
<div>人心灵的伤痛若无知己来抚慰,便会荒芜;人的欢乐若知己来共享,再多的快乐也是悲伤。知己之于人,本是必不可缺。一个人的痛苦要找人倾诉,一个人的愁绪要有人来排解。人若没有知己,心灵便是一片怎样的荒凉。</div>
</body>
</html>

运行程序尝试一下


CSS3的background-Origin属性

background-Origin属性指定了背景图像的位置区域。

content-box, padding-box,和 border-box区域内可以放置背景图像。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            border:1px solid black;
            padding:35px;
            background-image:url('https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg');
            background-repeat:no-repeat;
            background-position:left;
        }
        #div1
        {
            background-origin:border-box;
        }
        #div2
        {
            background-origin:content-box;
        }
    </style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<p>background-origin:content-box:</p>
<div id="div2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>

运行程序尝试一下


CSS3 background-clip属性

CSS3中background-clip背景剪裁属性是从指定位置开始绘制

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        #example1 {
            border: 10px dotted #e53f3f;
            padding:35px;
            background: yellow;
        }
        #example2 {
            border: 10px dotted #4fcfc4;
            padding:35px;
            background: yellow;
            background-clip: padding-box;
        }
        #example3 {
            border: 10px dotted #8ceed8;
            padding:35px;
            background: yellow;
            background-clip: content-box;
        }
    </style>
</head>
<body>
<p>没有背景剪裁 (border-box没有定义):</p>
<div id="example1">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: padding-box:</p>
<div id="example2">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: content-box:</p>
<div id="example3">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</body>
</html>

运行程序尝试一下


新的背景属性

顺序描述CSS
background-clip规定背景的绘制区域。3
background-origin规定背景图片的定位区域。3
background-size规定背景图片的尺寸。3



继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> #example1 { background-image: url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg), url(http://scimg.jb51.net/allimg/160822/103-160R21K405308.jpg); background-position: right bottom, left top; background-repeat: no-repeat, repeat; padding: 15px; } </style> </head> <body> <div id="example1"> <h1>正能量</h1> <p>你是否经常狠不下心来做事,对自己不够狠,对别人也不够狠。所以,你总是黏黏糊糊,总是不忍心去拒绝别人,总是下不了决心让自己过的更好,总是缠绵过往不能自拔……完了,优柔寡断的你,必须狠一次,否则你永远也活不出自己</p> <p>别为小小的委屈难过,人生在世,注定要受许多委屈。一个人越是成功,他所遭受的委屈也越多。要使自己的生命获得极值和炫彩,就不能太在乎委屈,不能让它们揪紧你的心灵、扰乱你的生活。你要学会一笑置之,超然待之,要学会转化势能。智者懂得隐忍,原谅周围的那些人,让我们在宽容中壮大。</p> </div> </body> </html>
提交重置代码
高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

面对疾风吧

可以可以。。。不过感觉这个CSS里也有吧

7年前    添加回复 0

小水滴

原来图片上面加文字是这样加的啊,小水滴涨见识了,我要汇流成大海

7年前    添加回复 0

我喜欢晴天

和css的背景属性差不多啊

7年前    添加回复 0

小天

这个不错,背景图小了,也是可以调的了

7年前    添加回复 0

末日的春天

那么就可以不用给背景图设置过多的样式了

7年前    添加回复 0

background-origin有什么具体的作用?

[最新 数据分析师 的回答] background-origin有什么具体的作用?-PHP中文网问答-background-origin有什么具体的作用?-PHP中文网问答围观一下哦,学习一下。

时间:7年前

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~