|
|
|
示例 2 : 图片做背景 示例 3 : 本地测试 示例 4 : 背景重复 示例 5 : 背景平铺
属性名background-color
颜色的值可以采用3种方式 1. 预定义的颜色名字 比如red,gray,white,black,pink，参考颜色速查手册 2. rgb格式 分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色 3. 16进制的表示 #00ff00 等同于 rgb(0,255,0) <style>
p.gray {background-color: gray;}
h1 {background-color: transparent}
h2 {background-color: rgb(250,0,255)}
h3 {background-color: #00ff00}
</style>
<p class="gray">灰色</p>
<h1>透明背景，默认即透明背景</h1>
<h2>紫色</h2>
<h3>绿色背景</h3>
<style>
p.gray {background-color: gray;}
h1 {background-color: transparent}
h2 {background-color: rgb(250,0,255)}
h3 {background-color: #00ff00}
</style>
<p class="gray">灰色</p>
<h1>透明背景，默认即透明背景</h1>
<h2>紫色</h2>
<h3>绿色背景</h3>
图片做背景
<style>
div#test
{
background-image:url(/study/background.jpg);
width:200px;
height:100px;
}
</style>
<div id="test">
这是一个有背景图的DIV
</div>
<style>
div#test
{
background-image:url(/study/background.jpg);
width:200px;
height:100px;
}
</style>
<div id="test">
这是一个有背景图的DIV
</div>
在本地测试的时候，请先从右侧下载图片
不要写成 background-image:url(/study/background.jpg); 而是写成 background-image:url(background.jpg); 并且把图片和html文件放在同一个目录下
background-repeat属性
值可以选 repeat; 水平垂直方向都重复 repeat-x; 只有水平方向重复 repeat-y; 只有垂直方向重复 no-repeat; 无重复 <style>
div#norepeat
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-repeat: no-repeat;
}
div#repeat-x
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-repeat: repeat-x;
}
</style>
<div id="norepeat">
背景不重复
</div>
<div id="repeat-x">
背景水平重复
</div>
属性：background-size
值：contain <style>
div#contain
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-size: contain;
}
</style>
<div id="contain">
背景平铺，通过拉伸实现，会有失真
</div>
<style>
div#contain
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-size: contain;
}
</style>
<div id="contain">
背景平铺，通过拉伸实现，会有失真
</div>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2024-04-12
为什么我的背景是空白的
2020-10-22
URL是啥啊
2 个答案
繁星映月 跳转到问题位置 答案时间：2021-06-02 图片的路径
不一样的烟火 跳转到问题位置 答案时间：2020-12-29 URL（），
单单说URL 就是 格式。
就和数学公式（a+b）² = a²+2ab+b² 一样， 格式固定只要改变中间的变量就可以得出结果
（），里面方的就是 “值”，这里就是图片所在的 “路径”。
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-03-05
背景重复区域大小
2019-10-31
div是什么意思
2018-11-08
图片背景
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 8 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||||||||||||||||||||||||||||||
