背景有关知识点

于 2019-07-23 21:20:44 发布
阅读量153 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42834788/article/details/97035091
版权

一、背景尺寸属性

1.什么是背景尺寸属性
背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 800px;
            height: 500px;
            margin: 0 auto;
        }
        ul li{
            list-style: none;
            float: left;
            width: 200px;
            height: 200px;
            margin: 30px 30px;
            border: 1px solid #000;
            text-align: center;
            line-height: 200px;
        }
        ul li:nth-child(1){
            background: url("images/dog.jpg") no-repeat;
        }
        ul li:nth-child(2){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数:宽度
            第二个参数:高度
            */
            background-size:200px 100px;
        }
        ul li:nth-child(3){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数:宽度
            第二个参数:高度
            */
            background-size:100% 80%;
        }
        ul li:nth-child(4){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数:宽度
            第二个参数:高度
            */
            background-size:auto 100px;
        }
        ul li:nth-child(5){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数:宽度
            第二个参数:高度
            */
            background-size:100px auto;
        }
        ul li:nth-child(6){
            background: url("images/dog.jpg") no-repeat;
            /*
            cover含义:
            1.告诉系统图片需要等比拉伸
            2.告诉系统图片需要拉伸到宽度和高度都填满元素
            */
            background-size:cover;
        }
        ul li:nth-child(7){
            background: url("images/dog.jpg") no-repeat;
            /*
            cover含义:
            1.告诉系统图片需要等比拉伸
            2.告诉系统图片需要拉伸到宽度或高度都填满元素
            */
            background-size:contain;
        }
    </style>
<body>
<ul>
    <li>默认</li>
    <li>具体像素</li>
    <li>百分比</li>
    <li>宽度等比拉伸</li>
    <li>高度等比拉伸</li>
    <li>cover</li>
    <li>contain</li>
</ul>
</body>

二、背景图片的定位区域属性

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
            float: left;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 20px dashed #000;
            padding: 50px;
            margin-left: 20px;
            background: url("images/dog.jpg") no-repeat;
        }
        ul li:nth-child(2){
            /*
            告诉系统背景图片从什么区域开始显示,
            默认情况下就是从padding区域开始显示
            */
            background-origin: padding-box;
        }
        ul li:nth-child(3){
            background-origin:border-box;
        }
        ul li:nth-child(4){
            background-origin:content-box;
        }
    </style>
</head>
<body>
<ul>
    <li>默认</li>
    <li>padding</li>
    <li>border</li>
    <li>content</li>
</ul>
</body>

三、背景绘制区域区域的属性

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
            float: left;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 20px dashed #000;
            padding: 50px;
            margin-left: 20px;
            background: red url("images/dog.jpg") no-repeat;
        }
        ul li:nth-child(2){
            /*
            背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景
            */
            background-clip: padding-box;
        }
        ul li:nth-child(3){
            background-clip: border-box;
        }
        ul li:nth-child(4){
            background-clip: content-box;
        }
    </style>
</head>
<body>
<ul>
    <li>默认</li>
    <li>padding</li>
    <li>border</li>
    <li>content</li>
</ul>
</body>

四、多种背景图片

 

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 0 auto;
            /*
            多张背景图片之间用逗号隔开即可
            注意点:
            先添加的背景图片会盖住后添加的背景图片
            建议在编写多重背景时拆开编写
            */
            /*background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom,url("images/animal4.png") no-repeat right bottom,url("images/animal5.png") no-repeat center center;*/
            background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-position: left top, right top, left bottom;
        }
    </style>
</head>
<body>
<div></div>
</body>

 

weixin_42834788
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1024，你懂的
weixin_40876133的博客
10-24 25万+
哎呀，是不是被标题党套路了，不过认真读完，会有收获的哦，相信我。话说小拾君最近逛知乎，无意间被某些帖子指引，发现知乎已经快被1024攻占了，哈哈，然后今天准备跟大家科普一下1024。各位老司机们看看就好，千万不要开车....... 1024的起源。 经小拾君向诸多老司机求证，以及在度娘的帮助下，小拾君终于知道了1024的来历了。1024最早起源了某社区（什么社区，1024你懂的）为了防...
知识点
qq_27029491的博客
03-28 390
1、邮箱验证 //第一种：^(\w+((-\w+)|(\.\w+))*)\+\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$ //第二种：^([a-zA-Z0-9]*[-_]?[a-zA-Z0-9]+)*@([a-zA-Z0-9]*[-_]?[a-zA-Z0-9]+)+[\.][A-Za-z]{2,3
爱看电影盒子
06-27
爱看影视具有在线播放、电影下载、影片搜索、自动播放下一集以及缓冲下一集的功能，同时支持在线直播网络电视97套在线电台，可收看NBA、足球直播赛事，最新的综艺影视节目，可观看上万部高清电影、电视剧，全部DVD画质音效，一点就播，还能播放所有电影网站的影片，绝对是您看视频装机必备工具。 一、一站式视频观看体验 全球首创一站式视频服务理念，您从想看到看，15秒完成。 一站式视频服务基于互联网真正百万部的海量内容，高效智能的搜索技术，方便快捷的产品功能，极速稳定的数据传输技术。 二、高清画质、DVD影视一点即播 基于快放影视处理技术使得DVD画质的网络视频节目一点即播，无需等待。并支持节目进度任意拖放，您可以从节目任意位置开始播放。 三、软件精小，功能强大、真正百万部海量内容 软件只有2M左右，占用极少CPU、内存等系统资源。但聚合互联网百万部电影、电视剧、动漫、综艺节目，同时配合各种功能，注重细节，设计简约而不简单，极大提升您的使用体验。 四、好友分享、精彩影评 看到兴起处，推荐功能方便的让您将精彩节目介绍给最好的朋友。网友们精彩绝伦的影评更让您流连忘返。
电影天堂TV盒子 1.5.0 版
07-26
电影天堂 TV 盒子 1.5.0 版， 可以用于 TV 电视 安卓系统的
吴伯凡-认知方法论-数据扭曲力场
遇见即为缘
08-13 1033
      数据扭曲力场最初源于乔布斯的现实扭曲立场，现实扭曲立场是说在现实世界中给定一个磁力场，其中的铁粉（磁性物质）会被吸引成不同的形状。数据扭曲力场也是与此相同的，数据只会吸引于此相通的物质，排斥相异的物质。我们在征询别人意见的时候，通常只是在寻找与自己相同的证据。        就像是老娘与老婆的差别（哈哈，我还没有老婆，体会不是很深刻），老娘对我们的预设值是常量，认为我们是全天下最好的...
IntelliJ IDEA如何导入Gradle项目
热门推荐
栋先生
04-20 11万+
最近学习Gradle，本文来重点介绍一下，如何使用`IntelliJ IDEA`导入`Gradle项目的一种方法。
2022年HTML相关知识点表格标签.pptx
11-02
HTML相关知识点表格标签 HTML表格标签是HTML中一种基本的结构元素，用于组织和显示数据。下面是HTML表格标签的相关知识点： 表格的基本语法 在HTML中，表格的建立将运用、、、四个标签完成。 * 标签用于定义一个...
CSS知识点汇总.docx
09-01
CSS 知识点汇总 CSS（Cascading Style Sheets）是一种用于描述 HTML 或 XML 文档样式的标记语言。它可以控制文档的布局、颜色、字体、间距等样式。下面是 CSS 知识点汇总： CSS 单位 在 CSS 中，单位是指用来度量...
ACM 简单讲解 知识点 背景了解 基础知识
最新发布
06-25
简单讲解一下ACM的基础知识，涉及不是很深入
蓝色斑点PPT背景图片
07-16
对于"蓝色斑点PPT背景图片"这一主题，我们来详细探讨一下相关的知识点。 首先，我们要理解的是背景图片的作用。在创建PPT（PowerPoint）演示文稿时，背景图片是作为底图存在的，它为文字、图表和其他元素提供了一个...
挂瓶打点滴背景矢量
07-25
而压缩包子文件的文件名称"alogo1117"也无法直接关联到特定的IT知识点。因此，我无法按照您的要求提供相关的IT知识。如果有关于编程、软件开发、网络技术、数据库管理、操作系统、信息安全等IT领域的具体问题，我会...
吴伯凡-认知方法论-钟型事件与与云型事件
遇见即为缘
06-13 1602
    钟型事件类似于在刻画一种任何事情都有理有法可循，按照规则，可得到一定的结果。就像佛教所说的种瓜得瓜，种豆得豆。结果是可预见的。云型事件在描述一种事件捉摸不定，很难用一种确定的规则，原理来描述事件的性质，即事件是复杂多变的，受多种因素的影响。     面对不同的事件要用不同的思维方式，很多时候我们感到苦恼有很大方面的原因1.是对事件的定性，定位不明确2.面对该事件用了另外一种事件的思维方式。...
kindle paperwhite 使用体验
09-08 1235
海淘日版，到手几分钟，屏幕中间就莫名其妙的出现了竖纹，而且越来越多，郁闷 后来google，据说电子墨水不要靠近磁场，莫非是手机扬声器导致？ 目前还能凑合着看，真影响识别字了，再联系客服 日版无法在大陆维修，不差钱的还是国行吧 以前看到过同事的kindle5，翻页时刷的闪一下 对于习惯手机等刷新速度的我来说顿时感觉无法接受 买这个实在是等几个月了mini2还不发布，合肥这边图书馆又
iPhone配置实用工具介绍
sakulafly的专栏
09-20 3万+
苹果提供了iTunes工具给我们操作iOS设备上的内容，可以安装应用、同步照片、音乐等等。不过iTunes使用比较麻烦，不太方便，第三方的iTools等工具是我们比较常用的。不过对iOS应用开发者来说，我们常常需要发布Adhoc版本，这些版本只能装在指定的一些设备里面，和通过AppStore发布的应用是不一样的，有时会发生iTunes/iTools死活安装不上应用的情况。       这里要介绍
简单工厂模式、工厂模式以及抽象工厂模式（具体）
cosmos_lee
06-29 8万+
抽象工厂模式：我们现在要对mysql/oracle数据库中的User表进行操作，User表定义如下：public class User { private int uid; private String uname; public int getUid() { return uid; } public void setUid(int ui...
rabbitmq常用的3种模式
peanut的博客
07-11 7156
1.fanout（广播，发布订阅） 发送到exchange的所有消息会被转发到与exchange绑定的所有queue，不需要处理路由 路由的作用：exchange会根据路由匹配队列,发送一个消息到交换机的时候，交换机根据路由发送到匹配这个路由的队列中去 1.public Binding FanoutBinding1() { return BindingBuilder.bin...
List、Set、Map的区别和关系
Justin
07-25 4万+
三者的关系图： 一、超级接口 Iterable： 该接口中会返回一个迭代器，实现该接口的类都能作为forEach的对象。 二、Collection：继承了Iterable接口，并且可以被以下类实现。 collection是集合listst和set的接口。 （一）List接口（有序） 1、LinkedList实现类： 注：A、LinkedList底层使用双向链表实...
优先级中的important和权重问题
weixin_42834788的博客
07-18 1370
一、important问题 1.什么是!important 作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高 注意点: 1.!important只能用于直接选中, 不能用于间接选中 2.通配符选择器选中的标签也是直接选中的 3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升 4.!important必须写在属...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值