css 设置背景颜色和图片的一些技巧

css中,我们可以使用background来设置HTML元素的背景图片和背景颜色,设置背景颜色是非常简单的一件事情,但设置背景图片则需要一些技巧,本文章向大家介绍background的使用方法和技巧,需要的码农可以参考一下。

设置背景颜色:

要设置背景颜色,直接使用“background:颜色值;”即可。如:

body{background:#000} 

将body的背景颜色设置为黑色。

 

设置背景图片:

1.规律背景图片。

不如我们要设置一个渐变的背景图片,这种背景只需要切出1像素宽,高度合适的图片作为背景即可。

body{background: url("../images/body_bg.jpg") repeat-x rgb(222, 235, 243);} 

实例:

<!DOCTYPE html> 
<html> 
<head> 
<title>css 设置背景颜色和图片的一些技巧</title> 
<style>
body{background: url("../Public/images/body_bg.jpg") repeat-x rgb(222, 235, 243);} 
</style>
</head> 
<body> 

</body> 
</html>

在线运行

 

2.不规律的图片

常常看到一些专题或形象网页,背景是一种非常大图片作为背景,而通常情况下宽屏和窄屏显示器都能显示铺满的全屏背景图片,就像图片能自适应宽度大小一样的。其实这种实现一样非常简单,将这张图片宽度美工设计足够大,比如市场上最宽显示屏分辨率宽度为2560像素,那么要让这样的宽屏显示器浏览此网页也能铺满全屏,那么你的这张背景图片就必须做成宽度大于或等于2560px宽度的,这样以来宽屏、窄屏显示器打开此网页都能铺满全屏,最小化、最大化、改变浏览器窗口打开背景图片都是全屏的居中的看上去就像背景图片自适应大小一样。

关键:全屏自适应背景图片关键是图片做足够宽,以最宽分辨率显示屏能都铺满,小分辨率自然就更是铺满。同时需要设置这样背景图片作为body背景后需要居中。

body{background:url(bg.jpg)no-repeatcenter0}

代码解释:设置这个图片为网页背景,通常不平铺(no-repeat),水平居中,靠上显示

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

子绝父相 这个子绝父相太重要了,是我们学习定位的口诀,时时刻刻记住的。 这句话的意思是 子级是绝对定位的话, 父级要用相对定位。 首先, 我们说下, 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位)的父元素(祖先)进行定位。 就是说, 子级
分页条是web开发中常用的前端组件之一,它能将数据分批次展示给用户。我们知道诸如Bootstrap这类框架都提供了非常漂亮的分页条组件,但是你的项目可能不用到Bootstrap,你想自己定制一个属于你自己项目的漂亮的分页条,那么请看本文。 本文给大家介绍用纯CSS
背景图片不重复不平铺,可以这样设定背景: 1、body style=background-image: url(图片文件地址); background-attachment: fixed; 这样背景图片就会固定住,不会因页面滚动而重复。 2、使图在任何大小的屏幕都不会显示重复,可以这样设定背景(图像不平铺)
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行。 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/*
css margin用于设置对象标签之间距离间隔,例如如果要使两个div标签之间有一定的间距,我们可以使用css margin属性来设置。本文章向码农介绍css margin外边距使用方法和实例,需要的朋友可以参考一下。
在网站开发中,css float是一个经常需要使用的css属性,改属性用于设置css块级元素的浮动方向(左右浮动)。本文章向码农介绍css float使用方法和实例应用,需要的码农可以参考一下。