CSS (二) 背景

css背景样式
1、设置背景色：background-color
设置input标签背景色为蓝色，这个属性接受任何合法的颜色值

input { background-color: blue; }

2、设置背景图像：background-image
设置背景图像，必须为这个属性设置一个 URL 值为图片路径。

body { background-image: url(log.png); }

这时背景图片会默认铺满页面：

背景图平铺：background-repeat
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值：
repeat: 导致图像在水平垂直方向上都平铺，默认效果
repeat-x ：图像只在水平上重复

body {background-image: url(log.png);background-repeat: repeat-x }

repeat-y ：图像在垂直方向上重复

body { background-image: url(log.png);background-repeat: repeat-y }

no-repeat ：不允许图像在任何方向上平铺。

body { background-image: url(log.png);background-repeat: no-repeat }

3、背景定位： background-position
可以利用 background-position 属性改变图像在背景中的位置。
定位方式：位置关键字、百分比、长度值

位置关键字：

top: 固定顶点位置，否则图片会上下剧中而显示不全

body { background-image: url(log.png);background-repeat: no-repeat;background-position: center top;}

left:

body { background-image: url(log.png);background-repeat: no-repeat;background-position: letf top;}

right:

body { background-image: url(log.png);background-repeat: no-repeat;background-position: right top;}

bottom：

body { background-image: url(log.png);background-repeat: no-repeat;background-position: right bottom;}

百分比数值：

body { background-image: url(log.png);background-repeat: no-repeat;background-position: 50% 50%;}

长度值：
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 100 像素、向下 200 像素的位置上：

body { background-image: url(log.png);background-repeat: no-repeat;background-position: 100px 200px;}

3、背景关联：background-attachment
声明图像相对于可视区是固定的，因此不会受到滚动的影响。
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
如下：滑动页面时图像会固定不动

body { background-image: url(log.png);background-repeat: no-repeat;background-position: 100px 200px;background-attachment: fixed;}

4、背景图大小：background-size

通过像素指定

body { background-image: url(log.png);background-repeat: no-repeat;background-size: 300px 200px;}

通过百分比指定

body { background-image: url(log.png);background-repeat: no-repeat;background-size: 10% 10%; }

原始图片大小

body { background-image: url(log.png);background-repeat: no-repeat;background-size: auto; }

背景填满容器

body { background-image: url(log.png);background-repeat: no-repeat;background-size: cover;}

CSS (二) 背景相关推荐

【Java前端】CSS(二)[选择器,显示模式,背景属性]
CSS(二) ①.Emmet语法 - 快速生成HTML结构 - 快速生成CSS样式 - 快速格式化代码 ②.CSS的复合选择器 - 后代选择器 - 子选择器 - 并集选择器 - 伪类选择器链接伪类选 ...
php设置背景图片的代码,css设置背景图片如何实现？（代码实例）
本篇文章给大家带来的内容是关于css设置背景图片如何实现?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用J ...
html 图片按钮,css按钮背景图片如何实现？（代码实例）
css按钮背景图片如何实现?相信有很多刚刚接触css的朋友都会有这样的疑问.本章就给大家介绍css按钮背景图片如何实现.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 很多人提交表单 ...
css与背景相关的属性有哪些,css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) (图 ...
HTML+CSS实现背景图片铺满页面的方法
HTML+CSS实现背景图片铺满页面的方法针对页面背景图片我整理了几种方法仅供参考一.DIV中添加背景图片二.img中设置背景图片三.Body中设置背景图片结语针对页面背景图片我整理了几种 ...
html背景透明图片不透明,css中背景透明的图片不透明怎么解决
css中背景透明的图片不透明怎么解决一.使用滤镜解决img { background: transparent; -ms-filter: "progid:DXImageTransform. ...
85.CSS水波背景动画特效
效果 (源码网盘地址在最后) 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. 演示视频 [前端特效 85]CSS水波背景动画特效视频演示地址一:https://www.ixigu ...
Web前端线上系统课-01-HTML+CSS/06-CSS盒子模型-CSS设置背景
CSS盒子模型-CSS设置背景盒模型 margin <!DOCTYPE html> <html lang="en"><head><met ...
Css background背景语法
一.Css background背景语法 - TOP CSS背景基础知识 CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式. 背景语法: background: b ...

CSS (二) 背景

CSS (二) 背景相关推荐

最新文章

热门文章