background url怎么填充_CSS background 属性
标签:
一、background属性可以设置一个元素的背景样式,当然前提是这个元素有具体的宽高值。
先来一个简单的背景设置:
1 #show-box{
2 width:800px;
3 height:500px;
4 background:#000;
5 background-image:url(image url);
6 }
7
这里只是简单的设置了颜色和背景贴图。
下面让我们来看一下官方的background的属性:
语法格式:
background: color position size repeat origin clip attachment image;
注意:如果同时设置了“position”和“size”两个属性,应该用左斜杠“/”,而不是用空格把两个参数值隔开:“position/size”。
1 background: url("img.jpg") center center/100% 100% no-repeat;
属性表(图片可能会显示得太小,请右键“在新标签中打开”以查看原图):
1.color:背景颜色值。这个属性会把整个元素添加颜色,而且处于最底层(在有背景图片的情况下就可以看出)。
可选值:默认是透明,其他值可以通过查看“CSS颜色值表”来设置。
1
3 width:180px;
4 height:180px;
5 border:20px dashed #000;
6 background-color:#000000;
7 background-color:blue;
8 background-color:rgb(255, 255, 255);
9 background-color:rgba(255, 255, 255, 0.8);
10 }
11
2.position:背景图片的定位。如果没有图片设置,那么这个属性不起效果。
可选值:两个参数,水平位置和垂直位置。如果只有一个值,第二个值为“center”。
默认值是元素的左上顶角。可以使用位置关键字(top,right,bottom,left,center)。百分比(以元素大小为基值)。像素值。
1
3 width:180px;
4 height:180px;
5 border:20px dashed #000;
6 background-position:center;
7 background-position:center top;
8 background-position:0 100px;
9 background-position:10% 20%;
10 }
11
3.size:图片尺寸。应用于图片。
可选值:两个数值,如果只有一个值,第二个值为auto。
默认是图片自身大小。可以使用像素值,百分百(以元素大小为基值)。
cover:等比例缩放图片,覆盖这个元素。类似与windows中桌面背景的“填充”。
contain:等比例缩放图片,适应元素的宽或者高。类似于windows中桌面背景的“适应”。
4.repeat:平铺方式。
repeat:完全平铺,复制图片把整个元素填满。(默认)
repeat-x:水平平铺,在水平方向复制并平铺。
repeat-y:垂直平铺,在垂直方向复制并平铺。
no-repeat:不平铺,只使用一张图片。
5.origin:背景的参考区域。
可选值:border-box,padding-box,content-box。
6.clip:背景的可视区域。
可选值:border-box,padding-box,content-box。
对比一下不同值的效果图:
1.origin:border-box;clip:border-box;
1
3 width:180px;
4 height:180px;
5 margin:20px;
6 padding:20px;
7 border:20px dashed #000;
8 background:url("img.jpg") no-repeat border-box border-box;
9 }
10
2.origin:padding-box;clip:border-box;
1
3 width:180px;
4 height:180px;
5 margin:20px;
6 padding:20px;
7 border:20px dashed #000;
8 background:url("img.jpg") no-repeat padding-box border-box;
9 }
10
3.origin:content-box;clip:border-box;
1
3 width:180px;
4 height:180px;
5 margin:20px;
6 padding:20px;
7 border:20px dashed #000;
8 background:url("img.jpg") no-repeat content-box border-box;
9 }
10
4.origin:border-box;clip:content-box;
1
3 width:180px;
4 height:180px;
5 margin:20px;
6 padding:20px;
7 border:20px dashed #000;
8 background:url("img.jpg") no-repeat border-box content-box;
9 }
10
可以看出,origin设置的是位置,clip则会根据区域裁剪出背景图片。
7.attachment:设置背景图像是否固定或者随着页面的其余部分滚动。
默认值是scroll:背景图片随页面的其余部分滚动。fixed:背景图像是固定的。
8.多背景设置。
导入图片:background-image: url(image url);
二、多背景设置。
多背景的写法:使用逗号“,”隔开,继续写背景属性。
background: color position size repeat origin clip attachment image, color position size repeat origin clip attachment image;
也可以具体属性单独设置:background-image:url(image url 1),url(image url 2);
1
3 width:180px;
4 height:180px;
5 border:20px dashed #000;
6 background:url("img.jpg1") left top/100% 100% no-repeat,7 url("img.jpg2") left center/100% 100% no-repeat,8 url("img.jpg3") left bottom/100% 100% no-repeat,9 url("img.jpg4") center top/100% 100% no-repeat;
10 }
11
1
3 width:180px;
4 height:180px;
5 border:20px dashed #000;
6 background-image:url("img.jpg1"), url("img.jpg2"), url("img.jpg3"), url("img.jpg4");
7 background-position:left top, left center, left bottom, center top;
8 background-size:100%;
9 background-repeat:no-repeat;
10 }
11
标签:
background url怎么填充_CSS background 属性相关推荐
- CSS3之background的调整和增加的属性
对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个背景图片 ...
- background:url(./images.png) no-repeat 0 center的用法
background:url(./images.png) no-repeat 0 center; //图像地址 不重复 水平位置0 垂直位置居中 background:url(./images.png ...
- background:url(../images/list01.png) no-repeat 0 center;是什么意思
例子: background:url(../images/list01.png) no-repeat 0 center; background:url(../images/bg.png) no-rep ...
- 前端零基础入门(八):background的妙用_css精灵
在前面我们已经了解到了网页当中背景的基本用法了,包括: 背景颜色,背景图片,背景图片是否重复,背景图片是否平铺等等基础样式. 今天要和大家讨论的是背景图的一个稍微高级一点的用法:图片精灵(也叫:雪碧图 ...
- div设置背景图background:url
<div style="background:url('./bailu.png');background-size:100%;height:600px;"> 122 & ...
- less background url相对路径取不到编译报错问题
2019独角兽企业重金招聘Python工程师标准>>> 用react create app创建一个项目 执行npm run test 添加less支持,并添加modules:true ...
- 微信小程序使用img标签代替background:url()的解决方案
<template><div class="bargin-stage"><!--背景图--><img class="bg-img ...
- mask属性是css3的吗_CSS mask-image属性详细介绍(小结)
CSS mask遮罩属性的历史非常久远了,远到比CSS3 border-radius等属性还要久远,最早是出现在Safari浏览器上的,差不多可以追溯到09年. 不过那个时候,遮罩只能作为实验性的属性 ...
- html5 url颜色,HTML5input新增type属性color颜色拾取器的实例代码
type 属性规定 input 元素的类型.本文较详细的给大家介绍了HTML5 input新增type属性color颜色拾取器的实例代码,感兴趣的朋友跟随脚本之家小编一起看看吧 定义和用法 type ...
- 使用url连接mysql时的属性_MySQL数据库连接属性配置,即URL后一些配置参数及其重要性...
在JDBC中,Connection类的创建方式有三种函数(不包括连接池) 一是:DriverManager.getConnection(String url), 二是:DriverManager.ge ...
最新文章
- php ip地址地区,PHP查询ip所在地(省份,市)
- 系列文章丨AlphaGo Zero, 对普通人来说意味着什么?
- 解决chrome extension无法下载的问题
- python基础教程:ord()和chr()
- 【Linux网络编程】无连接和面向连接协议的区别
- CentOS 7.4下使用yum安装MySQL5.7.20 最简单的
- linux apache添加多站点配置(Ubuntn和Centos)
- java里冒泡排序编程案例_冒泡排序法-java案例详解
- html加载js文件失败,firefox/chrome动态设置script加载js文件失败
- php 查文件sha1 内存不足,SHA是否足以检查文件重复? (PHP中的sha1_file)
- ASP.NET操作简单的xml,增删改查
- Android开发的内存问题
- 【English】20190313
- 脱不花,如何成为高效学习的人
- 小工具 | 全站仪图根测量平差excel计算表格
- 二阶系统响应指标图_一阶和二阶系统的动态特性参数
- 天下会 - Google系列之谷歌搜索引擎高级用法:使用搜索语法精确搜索
- 每日一书:《性能测试从零开始loadrunner入门与提升》PDF高清版
- 【学习方法】无论学什么东西,三个步骤:①大致粗通 ②重点精通 ③融会贯通...
- 运动蓝牙耳机哪个品牌最好、运动蓝牙耳机排行榜推荐
热门文章
- APISpace 手机号码归属地API 方便好用
- 好玩有趣的 iOS URL Scheme
- python---plot函数对应的颜色参数
- lightgbm可视化后的threshold和leaf_value是什么意思?
- 弦截法求根c语言,弦截法求方程的根(c++)
- 入行这么久? 真正理解了缓存吗
- 大学生破译周鸿祎手机号 李开复放 橄榄枝
- mysql max over_max() over()
- html如何制作水滴效果图,html+css实现充电水滴融合特效代码
- 快速导出PDF文件中所有图片(使用Adobe Acrobat 10 )