百度360必应搜狗淘宝本站头条
nodejsbufferorg.jsoupsetnocountoncv2.bitwise_nottime.strptime
当前位置：网站首页 > 编程字典 > 正文

一篇文章带你了解CSS3 背景知识（css3背景图片）

toyiye 2024-08-21 01:59 4 浏览 0 评论

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

一、浏览器支持

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

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

属性ChromeFirefoxSafariOperaIEbackground-image (多背景)4.09.03.63.111.5background-size4.0 1.0 -webkit-9.04.0 3.6 -moz-4.1 3.0 -webkit-10.5 10.0background-origin1.09.04.03.010.5background-clip4.09.04.03.010.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 属性两个可能值是：contain 和 cover.

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

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

下面的示例演示了使用contain和cover：

#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等多个属性的应用，丰富的案例帮助大家更好的理解。

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

想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/

相关推荐

# Python 3 # Python 3字典Dictionary(1)

Python3字典字典是另一种可变容器模型，且可存储任意类型对象。字典的每个键值(key=>value)对用冒号(:)分割，每个对之间用逗号(,)分割，整个字典包括在花括号({})中,格式如...

Python第八课:数据类型中的字典及其函数与方法

Python3字典字典是另一种可变容器模型，且可存储任意类型对象。字典的每个键值...

Python中字典详解（python 中字典）

字典是Python中使用键进行索引的重要数据结构。它们是无序的项序列(键值对)，这意味着顺序不被保留。键是不可变的。与列表一样，字典的值可以保存异构数据，即整数、浮点、字符串、NaN、布尔值、列表、数...

Python3.9又更新了:dict内置新功能，正式版十月见面

机器之心报道参与：一鸣、JaminPython3.8的热乎劲还没过去，Python就又双叒叕要更新了。近日，3.9版本的第四个alpha版已经开源。从文档中，我们可以看到官方透露的对dic...

Python3 基本数据类型详解（python三种基本数据类型）

文章来源：加米谷大数据Python中的变量不需要声明。每个变量在使用前都必须赋值，变量赋值以后该变量才会被创建。在Python中，变量就是变量，它没有类型，我们所说的"类型"是变...

一文掌握Python的字典（python字典用法大全）

字典是Python中最强大、最灵活的内置数据结构之一。它们允许存储键值对，从而实现高效的数据检索、操作和组织。本文深入探讨了字典，涵盖了它们的创建、操作和高级用法，以帮助中级Python开发...

超级完整|Python字典详解（python字典的方法或操作）

一、字典概述01字典的格式Python字典是一种可变容器模型，且可存储任意类型对象，如字符串、数字、元组等其他容器模型。字典的每个键值key=>value对用冒号:分割，每个对之间用逗号,...

Python3.9版本新特性:字典合并操作的详细解读

处于测试阶段的Python3.9版本中有一个新特性：我们在使用Python字典时，将能够编写出更可读、更紧凑的代码啦！Python版本你现在使用哪种版本的Python？3.7分？3.5分？还是2.7...

python 自学，字典3(一些例子)（python字典有哪些基本操作）

例子11；如何批量复制字典里的内容2；如何批量修改字典的内容3；如何批量修改字典里某些指定的内容...

Python3.9中的字典合并和更新，几乎影响了所有Python程序员

全文共2837字，预计学习时长9分钟Python3.9正在积极开发，并计划于今年10月发布。2月26日，开发团队发布了alpha4版本。该版本引入了新的合并(|)和更新(|=)运算符，这个新特性几乎...

Python3大字典:《Python3自学速查手册.pdf》限时下载中

最近有人会想了，2022了，想学Python晚不晚，学习python有前途吗？IT行业行业薪资高，发展前景好，是很多求职群里严重的香饽饽，而要进入这个高薪行业，也不是那么轻而易举的，拿信工专业的大学生...

python学习——字典（python字典基本操作）

字典Python的字典数据类型是基于hash散列算法实现的，采用键值对(key:value)的形式，根据key的值计算value的地址，具有非常快的查取和插入速度。但它是无序的，包含的元素个数不限，值...

324页清华教授撰写【Python 3 菜鸟查询手册】火了，小白入门字典

如何入门学习python...

Python3.9中的字典合并和更新，了解一下

全文共2837字，预计学习时长9分钟Python3.9正在积极开发，并计划于今年10月发布。2月26日，开发团队发布了alpha4版本。该版本引入了新的合并(|)和更新(|=)运算符，这个新特性几乎...

python3基础之字典（python中字典的基本操作）

字典和列表一样，也是python内置的一种数据结构。字典的结构如下图:列表用中括号[]把元素包起来，而字典是用大括号{}把元素包起来，只不过字典的每一个元素都包含键和值两部分。键和值是一一对应的...

取消回复欢迎 你 发表评论:

请填写验证码
一周热门
最近发表
标签列表