CSS 背景圖片添加重複和定位。

時間 2020-05-01

標籤 css 背景圖片添加重複定位欄目 CSS 简体版

原文原文鏈接

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>CSS 背景色. 背景圖片. 背景重複. 背景圖片固定和定位 </title>
<style type="text/css">
body{
height:3000px;
background-image:url(C:/Users/Administrator/Desktop/xxx.png);
background-repeat:no-repeat;
background-position:bottom;/*向下的*/
background-attachment:fixed;
/*給網頁3000px高度來觀察背景圖像固定屬性 background-attachment：fixed*/
}
h1{
text-align:center;
}
p{
background-color:pink;css

}
div{
/* 給背景添加圖片必定要注意圖片的取值路徑 */
background-image:url(C:/Users/Administrator/Desktop/xxx.png);
background:no-repeat; /* bupingpu */
background-repeat:repeat-x;/*1.background-repeat:repeat-x 我是水平平鋪 */
background-repeat:repeat-y;/*2.background-repeat:repeat-y 我是垂直平鋪*/
background-attachment:fixed;
/* background-position:5px 6px; */
border:1px solid red;
height:100px;
}
</style>
</head>
<body>
<h1>1.背景色</h1>
<p>1.屬性：background-color <br>
2.注意：背景顏的會填充到元素的邊框內邊距內容區域。
</p>html

<h1>2.背景圖片</h1>
<p>屬性：background-image<br>
取值：URL（圖像路徑）
</p>
<div id="" class="">
小星星
</div>url

<h1>3.背景重複</h1>
<p>1.默認狀況背景圖會在水平和垂直兩個方向（就是平鋪）<br>
屬性：background-repeat
取值repeat：默認值，水平垂直平鋪。
repeat-x: 水平平鋪；
repeat-y: 垂直平鋪；
no-repeart：不平鋪；
</p>
<h1>4.背景圖像固定</h1>
<p>屬性：background-attachment<br>
取值
fixed，背景圖像固定 <br>background-attachment:fixed;htm

</p>圖片

<h1>5.背景定位</h1>
<p>改變背景圖像在元素中的位置<br>
屬性：background-position<br>
取值：x y <br>
x表示水平方向移動 +向右 -向左<br>
y表示垂直方向 +向上 -向下<br>
x% y% :
0% 0% : 顯示在元素的左上方
100% 100% : 顯示在元素的右下方
50% 50% : 居中
left :靠左
right:靠右
center :將元素顯示在水平或垂直方向的中間
top:靠上
bottom:靠下
background-position:left top;
background-position:top left;
background-position:center;ip