CSS基础-background的那些属性
background的那些属性
background:背景的意思
常用的六个属性
1.background-color:背景颜色
2.background-image:背景图像
3.background-position:图片位置
4.background-repeat:图片是否重复
5.background-attachment:图片定位（fixed，scroll）
6.background-clip: 背景裁剪。有三个属性值为
border-box（图片或者颜色从边框开始）;
padding-box（图片或者颜色从padding部分开始）;
content-box图片或者颜色从content部分开始）;
疑惑点1:图像和颜色到底是从边框开始的？还是从内容开始的？
解答：背景图像和颜色默认是从border开始铺上去的。如果没有border就从下一级开始。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background: #000;
}
#box{
width: 100px;
height:100px;
background: url(../../image/1.jpg);
padding: 50px;
border:10px dashed
rgba(255,255,255,.5);/*将边框设置透明度，目的是查看是否从边框开始平铺的*/
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>运行效果图：
疑惑点2:如果想设置图像开始的位置怎么办？
解答：
background-clip: 背景裁剪。有三个属性值为
border-box（图片或者颜色从边框开始）;
padding-box（图片或者颜色从padding部分开始）;
content-box图片或者颜色从content部分开始）;
疑惑点3:background-position的属性值有那些写法？
解答：定位是从border的左上角开始。background-position：x,y;第一个值是距离左边的距离
第二个值是距离上边的距离
x:left,center,right
y:top,center,bottom
background-position：10px; 只有一个值时，默认第二个值是center
background-position：10px bottom;
background-position: bottom 10px ;当存在数值的时候，顺序写错则不显示。存在数值时顺序必须写对。要按照前面是x值，后面是y值来写。eg：background-position: 10px bottom ;才正确。
background-position: bottom right;当不存在数值的时候，顺序无所谓。
疑问4: background的复合属性如何写呢?
解答：background:先考虑是否图片重复，在考虑位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
border:10px solid pink;
padding: 50px;
background:url(../../image/1.jpg) no-repeat center content-box;
;
}
</style>
</head>
<body>
<div class="box"></div>
<!--background:先考虑是否图片重复，在考虑位置-->
</body>
</html>
效果图为：
CSS基础-background的那些属性的更多相关文章
- CSS基础知识之文本属性二三事
line-height 可以给某个元素指定一个不带单位的缩放因子,这样它的后代元素就会继承这个缩放因子,再根据自身的字号大小来计算自己的行高(line-height)值, body { font-si ...
- HTML+css基础 img 标签的属性
img: src=”” src是标签的属性 等号右边是属性值.就是图片的路径. 路径 1. 绝对路径:按照一个路径能找到,具体到某一个盘符下,某一个文件夹内. 2. 相对路径:以当前页面为参考物,去查 ...
- CSS基础 列表相关的属性的使用
1.无序列表:就是不需要排列顺序的情况,用无序列表 语法结构:<ul> <li></li> <li></li> </ul> 特点 ...
- CSS基础-行快属性，hover
CSS基础 1.行快属性 在css中有很多标签,分为行内标签,块标签,标签行内块标签,他们有着不同的属性. 块标签 div,ul,li,ol,h1~h6,p 可 ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
- CSS基础以及属性
一.CSS 偷个懒,啥是CSS我就不介绍啦 二.CSS语法 CSS语法:选择符{属性:属性值:属性:属性值:}选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素.属性:属性 ...
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
随机推荐
- input输入框的的input事件和change事件以及change和blur事件的区别
input输入框的 oninput事件 ,在用户输入的时候触发,只要元素值发生变化就会触发 input输入框的 onchange事件 ,要在输入框失去焦点的时候触发事件,当鼠标在其他地方点击一下才会触 ...
- Hive-多分隔符
ROW FORMAT SERDE 'org.apache.hadoop.hive.contrib.serde2.MultiDelimitSerDe' WITH SERDEPROPERTIES (&qu ...
- IntelliJ IDEA 部署 Web 项目，终于搞懂了！
这篇牛逼: IDEA 中最重要的各种设置项,就是这个 Project Structre 了,关乎你的项目运行,缺胳膊少腿都不行. 最近公司正好也是用之前自己比较熟悉的IDEA而不是Eclipse,为了 ...
- P1056排坐椅
这是2008普及组真题,是一个提高—的模拟. 仔细读完题便有了思路:累放在i行能隔开wi个,比较排序wi,输出即可.所以在这里遇到了结构体排序的问题与手写cmp的问题.对于两个语法知识掌握得都不好,所 ...
- PY个快速模
既然这道题是数学题,那就用 PY 吧! 学点东西: print 可以和 c++ 中的 printf 一样快乐的输出格式 另外一点: 这道题可能数据不够强?想想应该有一个 \(0^0 ~\%~ k =0 ...
- 1rem,1em,1vh,1px含义
rem:相对于页面根元素<html>元素,通常做法是给html元素设置一个字体大小,然后其他元素的大小就是相对于根元素的大小 em:相对于父元素字体大小,元素的width/height/p ...
- 封装class类--分割类名后
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- VLAN原理详解[转载] 网桥--交换机---路由器
来自:http://blog.csdn.net/phunxm/article/details/9498829 一.什么是桥接 桥接工作在OSI网络参考模型的第二层数据链路层,是一种以 ...
- /etc/nscd.conf - 域名服务缓存守护进程配置文件
描述 DESCRIPTION 该文件 /etc/nscd.conf 在启动 nscd(8) 时读入.每一行或者指定一个属性和值,或者指定一个属性.服务和一个值.域之间通过空格或者TAB分开.‘#’表示 ...
- CentOS7 编译安装python3.6.8（升级python）
1.安装依赖包和需要用到的工具 yum -y install wget openssl openssl-devel 这里如果不升级openssl,安装后pip安装模块可能会出错.点我查看pip安装模块 ...