css样式:背景设置

1: background-color 设置背景颜色

2:background-image来设置背景图片

语法：background-image:url(相对路径);

可以同时为一个元素指定背景颜色和背景图片，

这样背景颜色将会作为背景图片的底色

图片在元素中的位置

如果背景图片大于元素，默认会显示图片的左上角

如果背景图片和元素一样大，则会将背景图片全部显示

如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素

3:background-repeat用于设置背景图片的重复方式

可选值：

repeat，默认值，背景图片会双方向重复（平铺）

no-repeat ，背景图片不会重复，有多大就显示多大

repeat-x，背景图片沿水平方向重复

repeat-y，背景图片沿垂直方向重复

4:background-position可以调整背景图片在元素中的位置

背景图片默认是贴着元素的左上角显示

可选值：

该属性可以使用 top right left bottom center中的两个值

来指定一个背景图片的位置

top left 左上

bottom right 右下

如果只给出一个值，则第二个值默认是center

也可以直接指定两个偏移量，

第一个值是水平偏移量

- 如果指定的是一个正值，则图片会向右移动指定的像素

- 如果指定的是一个负值，则图片会向左移动指定的像素

第二个是垂直偏移量

- 如果指定的是一个正值，则图片会向下移动指定的像素

- 如果指定的是一个负值，则图片会向上移动指定的像素

5:background-clip

设置背景色的范围

可选值：

border-box 默认值，背景颜色会出现在边框的下边

padding-box 背景不会出现在边框，只会出现在内容区和内边距

content-box 背景只出现在内容区

6:background-origin

设置背景图片的偏移量计算的原点,配合偏移量使用的

padding-box 从内部距处开始计算

content-box 背景图片的偏移量从内容区处计算

border-box 从边框开始计算偏移量

7:background-size

设置图片的大小

参数：

第一个值：宽度

第二个值：高度

如果只写一个，第二值，默认为auto

cover 图片的比例不变，将元素铺满

contain 图片比例不变，将图片完整显示

css样式:背景设置相关推荐

怎样用html设置文档格式,Dreamweaver使用CSS样式表设置网页文本格式
Dreamweaver使用CSS样式表设置网页文本格式互联网发布时间:2008-10-17 19:35:50 作者:佚名我要评论本文章介绍如何在 Dreamweaver 中使用层叠 ...
微软雅黑html中怎么写,css样式怎么设置字体为微软雅黑？
css样式怎么设置字体为微软雅黑?下面本篇文章就来给大家介绍一下使用CSS设置字体为微软雅黑的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 首先要了解css中是如何控制字体的 ...
css样式如何设置边框，阴影，渐变等特效以及通过box-sizing属性设置盒子模型，背景区域设置等
今天,我继续来和大家聊聊css3. 在css3中,新增了很多样式,使得页面更加的美观,效果更加的优秀. 但是,同样要注意的是,很多css3提出的新样式没有得到浏览器的支持,也就意味着有一部分的css3 ...
CSS样式引入方式和部分CSS样式的设置
一.三种引入方式以及其应用场景 1.行间样式,当样式非常少.在一组选择器内需要优先样式,缺点是不是人看的代码样式,影响布局结构的视觉效果 a.写在起始标签的style属性里,各样式之间用": ...
前端css样式如何设置内边框
背景:我在写鼠标悬停样式 .topbox .menuBox > ul > li:hover { border-bottom: 4px solid #3C7CFC; font-weight: ...
图文样式css样式,初学解惑：常用CSS样式图文设置教程
注:在论坛中记得有人问过,做了网页之后字体特别大?如何控制网页中的字体呢?答案是用CSS来控制,今天给大家编写这个教程主要是面对初学者的! 一个有链接的文本,鼠标ON.OVER不同状态下的响应是不同的 ...
CSS样式背景图片的自适应
今天在写一个页面的时候,需要用到一个背景图片. 于是我把背景图片放到static(静态文件夹)里面,于是在css样式中引入,但是背景图片又太大,最后的样式就是比例失调.但是由于太久没有用到这个属性了, ...
用于设定表格样式的附加css,Dreamweaver使用CSS样式表设置网页文本格式
核心提示:本文章介绍如何在 Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式.您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本,从而能更加灵活自如地控 ...
textarea滚动条CSS样式属性设置
<textarea>滚动条属性CSS样式设置,包括textarea溢出横竖滚动条设置.隐藏滚动条.滚动条颜色.水平滚动条.垂直滚动条设置等. textarea滚动条CSS样式 textar ...

css样式:背景设置

css样式:背景设置相关推荐

最新文章

热门文章