CSS背景相关属性
CSS样式可以精确控制HTML元素的背景、边框的样式和外观，也可以精确控制边框的线型和形状。其中，背景相关属性可以用于控制背景色、背景图片等属性。在控制背景图片的同时还可以控制背景图片的排列方式。
常用的背景相关属性如下：
- background：设置对象的背景样式，是一个复合属性，可以用于同时设置背景色、背景图片、背景重复模式等属性。
该复合属性可以分开写为以下几个属性：
- background-color：设置背景色。如果同时设置了背景色和背景图片，则背景图片将覆盖背景色。
- background-image：设置背景图片。该属性需要使用url()函数指定图片地址，图片地址既可以是相对地址，也可以是绝对地址。
- background-repeat：用于设置对象的背景图片是否平铺。在指定该属性之前，必须先指定background-image属性。其属性值有repeat（平铺）、no-repeat（不平铺）、repeat-x（仅在横向平铺）和repeat-y（仅在纵向平铺）。CSS 3 为该属性新增了space和round，这两个属性值用于保证图片不会被裁减。其中，round通过自动调整背景图片的大小来达到目的，而space是调整背景图片的间距。
- background-attachment：用于设置背景图片是随对象内容滚动还是固定的。该属性支持以下两个值：
- scroll：指定背景图片会随元素里内容的滚动而滚动。是默认值。
- fixed：背景图片固定，不会随元素里内容的滚动而滚动。
- background-position：用于设置对象的背景图片位置。该属性需要横坐标和纵坐标两个值。（当一个网页中的小图标非常多时，通常会使用雪碧图以达到减少加载网页图片时对服务器的请求次数的目的，在使用雪碧图时，就需要使用background-position来定位显示出相应的小图标）
除了以上几个属性外，CSS 3 中新增了几个背景相关属性。
1、background-clip：用于设置背景图片的覆盖范围
该属性支持以下几个属性值：
- border-box:指定背景覆盖盒模型的边框区（border）、内填充区（padding）、内容区（content）
- no-clip：指定背景覆盖盒模型的边框区（border）、内填充区（padding）、内容区（content）
- padding-box：指定背景覆盖盒模型的内填充区（padding）、内容区（content）
- content-box：指定背景覆盖盒模型的内容区（content）
盒模型相关概念请查看：https://www.cnblogs.com/web12/p/9925742.html
2、background-origin：用于设置背景覆盖的起点
该属性支持以下几个属性值：
- border-box:指定背景图片从边框区开始覆盖
- padding-box：指定背景图片从内容填充区开始覆盖
- content-box：指定背景图片从内容区开始覆盖
3、background-size：用于设置背景图片的大小
该属性由两个值组成，分别代表图片的宽度、高度。可以设置具体的长度值，也可以指定百分比（为它所在元素的宽或高的百分比），还可以设置为auto（指定背景图片保持纵横比缩放，宽度、高度只能有一个被指定为auto，表明宽度、高度会以保持纵横比的方式自动计算出来）。
CSS3允许为以上几个属性指定多个属性值（属性值之间以英文逗号隔开）以此来实现多背景图片的效果。
CSS3还为背景提供了线性渐变和径向渐变支持，使得开发者可以进行更多灵活的背景设置。
- 使用linear-gradient设置线性渐变
语法格式为：background-gradient：linear-gradient（渐变方向，颜色列表）
方向参数支持如下：
| 角度 | 用英文 | 作用 |
| 0deg | to top | 从上到下 |
| 90deg | to right | 从左到右 |
| 180deg | to bottom | 从上到下 |
| 270deg | to left | 从右到左 |
| to top left | 右下角到左上角 | |
| to top right | 左下角到右上角 |
CSS3还提供了repeating-linear-gradient设置循环线性渐变，这种渐变将会循环利用给出的渐变颜色。下面页面代码示范了循环线性渐变的功能。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 循环线性渐变 </title>
<style type="text/css">
/* 为div元素增加边框 */
div{
height: 400px;
width: 400px;
}
</style>
</head>
<body>
background:repeating-linear-gradient(red, blue 10%, magenta 20%)<br>
红、蓝、洋红循环线性渐变
<div id="dv1" style="background:repeating-linear-gradient(red, blue 10%, magenta 20%);"></div>
<!-- 为input滑动事件（range）绑定onchange事件处理器 -->
角度：<input style="width:360px" type="range" min="0" max="360" value="0"
onchange="change(this.value);">
<script type="text/javascript">
function change(val){
var s = "linear-gradient(" + val + ", red, blue)";
document.getElementById("dv1").style.background =
"repeating-linear-gradient(" + val + "deg, red, blue 10%, magenta 20%)";
}
</script>
</body>
其效果如下：
- 使用radial-gradient设置线性渐变
其语法格式如下：
background：radial-gradient（形状？大小？at x坐标 y坐标，颜色列表）
radial-gradient语法格式可分为4个部分
- 形状：指定径向渐变的形状，目前支持circle和ellipse两种形状。该属性值可以被省略，如果省略，将由浏览器感觉被添加背景的HTML元素的形状来决定渐变的形状。
- 大小：指定径向渐变的大小。这部分也可以省略，如果省略，也将由浏览器来决定，通常会占满整个HTML元素。
- 圆心：圆心部分必须由at关键字开头，后面紧跟圆心的x坐标和y坐标。这部分也可以省略，如果省略，则默认为HTML元素的中心。x坐标和y坐标支持如下写法：
- left：代表x坐标的最左边
- center：可代表x左边和y坐标的中间
- right：代表x坐标的最右边
- top：代表y坐标的最顶部
- bottom：代表y坐标的最底部
- 数值：支持长度值和百分比，可代表x左边和y坐标的值
- 颜色列表：可以指定多个颜色
CSS背景相关属性的更多相关文章
- CSS 基础 背景相关属性操作
1.background-color:red : //设置背景颜色为红色,rgb(0,0,0)和transparent 均为透明颜色 2.background-image(可缩bgi写用tab键) 语 ...
- CSS will-change 属性
介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...
- css动画属性性能
性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
- CSS字体属性大全
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...
- css z-index属性使用过程中遇到的问题
z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...
- 【转】CSS z-index 属性的使用方法和层级树的概念
文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...
- css之属性部分
这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. ...
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
- CSS3 border-radius 属性和CSS outline 属性
CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...
随机推荐
- P5108 仰望半月的夜空 SAM+线段树覆盖
$ \color{#0066ff}{ 题目描述 }$ 半月的夜空中,寄托了多少人与人之间的思念啊 曦月知道,这些思念会汇集成一个字符串\(S(n = |S|)\) 由于思念汇集的过于复杂,因此曦月希望 ...
- js 平均分割
let alllist=res.data; var result = []; for (var i = 0; i < alllist.length; i += 3) { result.push( ...
- 如何高度自定义CollectionView的header和foot
最近在研究CollectionView,突然发现觉得他的HeaderSection和FootSection也可以高度自定义. 国外有详细的教程:http://www.appcoda.com/ios-c ...
- TabBarIOS
参考:http://blog.csdn.net/wmmhwj/article/details/68483592 import React, { Component } from 'react';imp ...
- [蓝桥杯][2015年第六届真题]机器人塔（dfs）
题目描述 X星球的机器人表演拉拉队有两种服装,A和B. 他们这次表演的是搭机器人塔. 类似: A B B A B A A A B B B B B A B A B A B ...
- sql2008R2新建链接服务器。
1:用sql新建链接服务器对象: /****** Object: LinkedServer [pad] Script Date: 10/23/2018 15:47:45 ******/ EXEC ma ...
- 1095. Maximum Swap —— Weekly Challenge
题目限定输入是[0, 10^8],因而不用考虑负数或者越界情况,算是减小了难度. public class Solution { /** * @param num: a non-negative in ...
- find命令用法集锦
find命令用法: 01--过滤日志find -name "catelina.*.out"|xargs -f |grep '关键字' 02 -忽略一个目录或者多个目录find ./ ...
- 第十次 Scrum Meeting
第十次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/4/16 14:30 30min 新主楼F座2F 附Github仓库:WEDO 例会照片 工作情况总结 人员 上阶 ...
- 转 RMAN: RAC Backup, Restore and Recovery using RMAN
PURPOSE The purpose of this document is to give a quick guide for using RMAN on RAC databases. We wi ...