CSS:背景色/背景画像
CSSではhtmlタグに背景画像または背景色を指定し、画像の位置を設定できます.
コード整理はw 3 schoolから:http://www.w3school.com.cn
コード整理はw 3 schoolから:http://www.w3school.com.cn
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<!--
（1） ：background-color
（2） ：background-image
（3） ：background-repeat
（4） ：background-position
（5） ：background-attachment
-->
<head>
<style>
h1 {background-color:#afa}
h2 {background-color:rgb(255,187,187)}
div#bgImage
{
background-image:url(images/bg_image.jpg);
padding:10px;
}
div#bgImageKeywords
{
background-color:#ddd;
background-image:url(images/d_sikao.png);
padding:30px;
background-repeat:no-repeat;
background-position:left bottom;
}
div#bgImagePercent
{
width:400px;
background-color:#ddd;
background-image:url(images/d_sikao.png);
padding:40px;
background-repeat:no-repeat;
background-position:20% 80%;
}
div#bgImageOffset
{
width:400px;
background-color:#ddd;
background-image:url(images/d_sikao.png);
padding:40px;
background-repeat:no-repeat;
background-position:200px 20px;
}
div#bgImageAttach
{
background-image:url(images/bg_image.jpg);
padding:10px;
background-attachment:fixed;
}
</style>
</head>
<title>CSS </title>
<body>
<h1> h1 ： </h1>
<h2> h2 ： </h2>
<h3> h3 （ ）</h3>
<div id="bgImage">
<p> ， ， （ ）<p>
</div>
<br/>
<!-- 。 ， ： ， 。 ， center。-->
<div id="bgImageKeywords">
<p> ， ， ， <p>
</div>
<br/>
<!-- 。 （ ）。
， ， 50%。 。-->
<div id="bgImagePercent" >
<p> 20%， 80% <p>
</div>
<br/>
<!-- 。 background-position 。-->
<div id="bgImageOffset">
<p> 200px， 20px<p>
</div>
<br/>
<!-- 。 ， ， 。 ， 。-->
<div id="bgImageAttach">
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
<p> 。<p>
</div>
</body>
</html>
