CSS background（背景图片）详解

“在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本章就给大家介绍css怎样设置背景图片。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。”

css怎样设置背景图片?

css background属性就是专门设置背景的属性，可以设置背景色，也可以设置背景图片。

background-image

定义和用法

background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
url(‘URL’)：指向图像的路径。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

background-color

定义和用法

background-color 属性设置元素的背景颜色

元素背景的范围

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

transparent 值

尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。

background-position

background-position属性设置背景图像的起始位置。

注意对于这个工作在Firefox和Opera，background-attachment必须设置为 “fixed（固定）”

可能的值

background-size

background-size属性指定背景图片大小。

可能的值

background-repeat

background-repeat 属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。

详细说明
background-repeat 属性定义了图像的平铺模式。

从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。

可能的值

background-attachment

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

可能的值

background-clip

background-clip属性指定背景绘制区域。

可能的值

background-origin

background-Origin属性指定background-position属性应该是相对位置。

注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见
如果在旋转元素不希望看到其背面时，该属性很有用。

background-blend-mode

ackground-blend-mode 属性定义了背景层的混合模式（图片与颜色）。

可能的值

normal 默认值。设置正常的混合模式。
multiply 正片叠底模式。
screen 滤色模式。
overlay 叠加模式。
darken 变暗模式。
lighten 变亮模式。
color-dodge 颜色减淡模式。
saturation 饱和度模式。
color 颜色模式。
luminosity 亮度模式。

语法

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

CSS background（背景图片）详解相关推荐

CSS实现背景图片详解全屏铺满自适应的方式
问题: CSS实现背景图片全屏铺满自适应的方式解决: (1)background-image:可添加多张背景图片.参数:url() || none(默认)background-image: url( ...
mip-img 不启用css,百度mip-img图片详解如何修改图片MIP
百度mip-img 图片详解,我们先来看下完整的标签 mip-img layout = responsive width = 350 height = 263 popup alt = www.xhcs ...
【前端小点】CSS之background背景属性详解
本篇文章我们将一起展开来看css的background背景属性. 一.结构创建DIV <div class="div1">1 </div> 样式 widt ...
background 背景属性详解
background 背景属性我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
css background:背景图片拉伸铺满
http://www.w3school.com.cn/tiy/c.asp?f=css_background-size&p=8 background: url("img.jpg&quo ...
DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
减少HTTP请求之合并图片详解（大型网站优化技术）
一.相关知识讲解看过雅虎的前端优化35条建议,都知道优化前端是有多么重要.页面的加载速度直接影响到用户的体验.80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样 ...
table vue 背景图片_table中background背景图片自动拉伸
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
css样式继承规则详解
css样式继承规则详解一.总结一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
如何把canvas元素作为网站背景总结详解
如何把canvas元素作为网站背景总结详解一.总结一句话总结:最简单的做法是绝对定位并且z-index属性设置为负数. 1.如何把canvas元素作为网站背景的两种方法? a.设置层级(本例代码就 ...

CSS background（背景图片）详解

background-image

background-color

background-position

background-size

background-repeat

background-attachment

background-clip

background-origin

backface-visibility

background-blend-mode

CSS background（背景图片）详解相关推荐

最新文章

热门文章