how2j.cn


相关下载
文件名 文件大小
background_small.jpg 12k
background.jpg 151k
关键字 简介 示例代码
background-color
背景颜色
示例代码
background-image:url(imagepath);
图片做背景
示例代码
url(background.jpg)
本地测试
示例代码
background-repeat
背景重复
示例代码
background-size: contain
背景平铺
示例代码
示例 1 : 背景颜色   
示例 2 : 图片做背景   
示例 3 : 本地测试   
示例 4 : 背景重复   
示例 5 : 背景平铺   

示例 1 :

背景颜色

属性名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>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

图片做背景

图片做背景
运行效果
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

本地测试

在本地测试的时候,请先从右侧下载图片
不要写成 background-image:url(/study/background.jpg);
而是写成 background-image:url(background.jpg);
并且把图片和html文件放在同一个目录下
本地测试
示例 4 :

背景重复

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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 5 :

背景平铺

属性: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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2017-12-05 table的背景颜色是bgcolor
asd无间
这有好多背景颜色的属性命名,很容易就记混了,这程序,不好编呀、








答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-09-12 什么叫背景平铺呀?
luffy0425
如题,什么叫背景平铺呀?




1 个答案

人来人往 答案时间:2017-09-13
就是拉伸,你改变一下背景大小就更能体会了




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-06-11 什么叫背景重复呀
2016-12-15 图片做背景 为何照抄图都出不来?
2016-11-29 有个小问题




提问之前请登陆
关于 前端基础-CSS-背景 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图