css使div背景图片填充的具体 *** 作步骤如下：
1、我们首先打开前端开发工具，新建一个html代码页面。
2、在html代码页面上创建一个用于设置背景颜色的div标签，然后给这个标签添加上class = "bg-img"。
3、设置背景图片，创建style标签，然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。
4、保存html代码，使用浏览器打开，这个时候会发现浏览器上的背景图片显示在左上角。
5、回到html代码页面，在bg-img类里添加background-position: center的属性。
6、保存html代码后重新刷新浏览器，这个时候会发现浏览器上的背景图片已经自动居中了。
首先打开电脑上自带的记事本程序，然后输入html网页基本结构语句。<html><body></body></html>
由于css样式必须在标签<head></head>之间，因此我们点击<html>后面，输入<head></head>标签。
在head标签之间输入样式标签<style></style>,然后定义一些属性，例如
<style type="text/css">
body {background-color: yellow} 定义网页背景色为黄色；
h1 {background-color: #00ff00} 定义h1标签背景色为#00ff00；
h2 {background-color: transparent} 定义h2标签背景色为透明；
p {background-color: rgb(250,0,255)} 定义p标签背景色为rgb值；
p.no2 {background-color: graypadding: 20px} 这个定义class属性为no2的p标签背景色为灰色，并且边距为20px；
</style>
然后点击body标签后面输入正文标签内容，例如
<h1>这是KING</h1>
<h2>这是KING</h2>
<p>这是KING</p>
<p class="no2">这个KING设置20内边距。</p>
点击记事本菜单中的文件，选择另存为，把内容保存为html网页格式。双击打开预览效果。
我们可以发现代码中两个同样的<p>标签显示的css样式却不同，区别就在于样式中定义的p.no2,这就是正文代码中class="no2"的优势所在，可以定义个性风格。
还可以选择用html设置，如下：
颜色自己调，可以用取色器查看颜色，例如background-color:#789999如果需要加边框可以用border属性
在数据库中增加一个颜色字段，在后台为每个数据设定颜色，这样你在页面输出数据的同时，把颜色的字段值一起输出页面，这个时候可以根据CSS或者JS来设定该数据所在的DIV显示什么颜色。
例如：
---------------------------------------------------
数据库中的字段值
id name color
1 AA公司 red
2 BB公司 blue
3 CC公司 yellow
4 DD公司 black
-----------------------------------------------
前端页面
<?phpwhile ($row = $result->fetch_assoc()) {
echo"<div class='".$row["color"]."'>".$row["name"]."</div>"
}
?>
----------------------------------------------------
CSS代码：
.red { background-color: red}
.blue { background-color: blue}
.yellow { background-color: yellow}
.black { background-color: black}
-----------------------------------------------------
这个是简易说明，比较简单用的是CSS来判断，为每个color设定一个背景色。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）