开发者社区> python进阶者> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

一篇文章带你了解CSS3 背景知识

简介: 一篇文章带你了解CSS3 背景知识
+关注继续查看

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

一、浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。

属性 Chrome Firefox Safari Opera IE
background-image (多背景) 4.0 9.0 3.6 3.1 11.5
background-size 4.0 1.0 -webkit- 9.0 4.0 3.6 -moz- 4.1 3.0 -webkit- 10.5 10.0
background-origin 1.0 9.0 4.0 3.0 10.5
background-clip 4.0 9.0 4.0 3.0 10.5

二、CSS3 多背景

CSS3允许你为一个元素添加多个背景图像, 通过使用 background-image 属性.不同的背景图像用逗号隔开,图像叠加在一起,

例:有两个背景图像,第一图像是背景图(在右下角)和第二图像是一个GIF动图(在左上角)。

代码如下:

<!DOCTYPE HTML>
<meta charset="utf-8">
<title>项目</title>
<head>
<style>
    #example1 {

    background-image: url(img/fy_indexBg.jpg), url(img/17I_hd.mp4.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}
</style>
</head>
<html>

<body>
 <div id="example1">
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
</body>

</html>

可以使用单独的背景属性(如上所示)或背景简写属性指定多个背景图像。

下面的例子使用了背景速记

上面的例子,有相同的结果)

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

1. CSS3 背景尺寸

CSS3 background-size 属性允许你指定背景图像的尺寸.

在CSS3之前的背景图像大小是图像的实际大小。CSS3允许我们使用背景图像在不同的上下文中。

size可以指定长度、百分比,或通过使用一个关键词: contain 或者 cover.

示例:图片背景图像比原图像小得多(以像素为单位):

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
  <style>
    #example1 {
        border: 1px solid black;
        background:url(img_flwr.gif);
        background-repeat: no-repeat;
        padding:15px;
    }

    #example2 {
        border: 1px solid black;
        background:url(img_flwr.gif);
        background-size: 100px 80px;
        background-repeat: no-repeat;
        padding:15px;
    }
</style>
</head>
<body>

  <p>原背景:</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>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

  <p>缩放背景图:</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>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

</body>
</html> 

background-size 属性两个可能值是:containcover.

含有关键词尺度的背景图像尽可能大的(但它的宽度和高度必须在内容区域)。因此,根据背景图像的比例和背景区的定位,有可能不被背景图像覆盖。

cover 关键词缩放背景图像,内容区域完全覆盖了背景图像(它的宽度和高度等于或超过该范围的内容)。因此,背景图像的某些部分可能不在背景区的定位是可见的。

下面的示例演示了使用containcover

#div1 {
    background: url(img_flower.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
#div2 {
    background: url(img_flower.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

2. 定义多个尺寸的背景图像

background-size 属性也接受多个背景值(使用逗号分隔列表),当处理多个背景时。

下面的示例指定三个背景图像,每个图像具有不同的background-size值:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>项目</title>
        <style>
            #example1 {
                background: url(img/fy_indexBg.jpg) left top no-repeat, url(img/fy_indexBg.jpg) right bottom no-repeat, url(img/17I_hd.mp4.gif) left top repeat;
                padding: 15px;
                background-size: 50px, 130px, auto;
                color: white;
            }
</style>
    </head>

    <body>

        <div id="example1">
            <h1>Lorem Ipsum Dolor</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div>

    </body>

</html>

    • *

3. 全尺寸的背景图片

如果希望在一个覆盖整个浏览器窗口的网站上有一个背景图像。.

要求如下:

填满整个页面的图像(没有空白)

  1. 缩放图像
  2. 图像居中页面
  3. 没有滚动条

下面的示例演示如何使用HTML元素(HTML元素始终是浏览器窗口的高度)。然后设置一个固定中心的背景上。然后用background-size属性调整它的大小:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
  <style>
    html {
      background: url(img/fy_indexBg.jpg) no-repeat center fixed;
      background-size: cover;
    }
</style>
</head>
<body>

  <h1>整个页面背景图</h1>
  <p>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.</p>

</body>
</html>

    • *

三、属性

1. background-origin 属性

CSS3 background-origin 属性指定在背景图像定位在哪里.

这个属性有三个不同的值:

border-box :背景图像从边框的左上角开始。

padding-box :(默认)背景图像从左上角的填充边缘。

content-box :背景图像从左上角的内容

下面的例子说明了background-origin属性:

#example1 {
        border: 10px solid black;
        padding: 35px;
        background: url(img/fy_indexBg.jpg);
        background-repeat: no-repeat;
    }

    #example2 {
        border: 10px solid black;
        padding: 35px;
        background: url(img/fy_indexBg.jpg);
        background-repeat: no-repeat;
        background-origin: border-box;
    }

    #example3 {
        border: 10px solid black;
        padding: 35px;
        background: url(img/fy_indexBg.jpg);
        background-repeat: no-repeat;
        background-origin: content-box;
    }

完整代码:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <style>
    #example1 {
        border: 10px solid black;
        padding: 35px;
        background: url(img/fy_indexBg.jpg);
        background-repeat: no-repeat;
    }

    #example2 {
        border: 10px solid black;
        padding: 35px;
        background: url(img/fy_indexBg.jpg);
        background-repeat: no-repeat;
        background-origin: border-box;
    }

    #example3 {
        border: 10px solid black;
        padding: 35px;
        background: url(img/fy_indexBg.jpg);
        background-repeat: no-repeat;
        background-origin: content-box;
    }                
</style>
</head>
<body>

  <p>没有 background-origin (padding-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>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

  <p>background-origin: border-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>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

  <p>background-origin: 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>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

</body>
</html>

2. background-clip 属性

CSS3 background-clip 属性指定背景的绘制面积.

该属性有三个不同的值:

border-box - (默认) 背景是画的边框外边缘 padding-box-背景被显示到填充物的外缘。content-box - 背景是画在内容框内

下面举例演示了background-clip属性:

#example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}

四、总结

本文主要介绍了CSS背景,通过CSS实现多背景显示,自定义某一些尺寸显示格式,background-origin等多个属性的应用,丰富的案例帮助大家更好的理解。

希望大家自己去尝试一下,实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【前端面试知识题】- 3. HTML && CSS
它是Web应用程序的传输协议,提供了双向的、按序到达的数据流。它是HTML5新増的协议, WebSocket的连接是持久的,它在客户端和服务器之间保持双工连接,服务器的更新可以及时推送到客户端,而不需要客户端以一定的时间间隔去轮询。
0 0
HTML之文本格式化、链接、头部、CSS(笔记小结)
HTML之文本格式化、链接、头部、CSS(笔记小结)
0 0
【前端】css布局html页面之inline-block布局错位解决方法
本篇文章中,主要讲讲前端布局的情况 对于,对于刚接触前端开发的小伙伴来说,布局是一个比较重要的知识点,如果知识点理解不到位,那么很容易出现布局错位的情况
0 0
通过DOM对HTML文档的元素内容和CSS样式进行操作
通过DOM对HTML文档的元素内容和CSS样式进行操作 通过前面的学习我们应该可以了解到,通过DOM我们可以操作HTMl文档中的任意的元素及属性,文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。 HTML代码: <button id="btn">切换</button> <div class="wrap" id="wrap" style="color: yellow;"> <p id="text" class="text">这是一个段落</p> <ul class="list">
0 0
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
0 0
用HTML+CSS构建一个绚丽的登录页面
自动切换背景,登录页面,水滴效果,绚丽的登录页面
0 0
HTML+CSS实现商品介绍模考(以Apple14为案例)
本文以最通俗易懂的语言为读者提供一个经典CSS小案例,商品介绍模块,并且结合时事,以Apple14为案例进行讲解。
0 0
实训-利用HTML+CSS制作某米官网首页(二)
实训-利用HTML+CSS制作某米官网首页
0 0
实训-利用HTML+CSS制作某米官网首页(一)
实训-利用HTML+CSS制作某米官网首页
0 0
实训-利用HTML+CSS做响应式项目网页
实训-利用HTML+CSS做响应式项目网页
0 0
+关注
python进阶者
专注于分享Python网络爬虫、数据挖掘、数据分析、数据处理、数据可视化、大数据、人工智能、云计算、机器学习等工具资源、热点资讯、相关技术文章、学习视频和学习资料等~~~ 该社区将不定期分享各种技术干货、学习资料等。关注我们,您收获的不只是知识,还有经验与人脉!
文章
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载