一、背景圖設置

使用背景圖片，設置為全屏

方式1：全部使用background設置

body{

background-image: url(bg.jpg);

background-size: 100% 100%;

background-repeat: no-repeat;

background-attachment: fixed;

}

背景圖片

背景尺寸

背景圖是否重復

背景是否滾動

方式2：使用寬高

body {

width: 100%;

height: 100%;

background: url(img/bg.jpg) no-repeat;

}

方式3：使用邊距

body {

padding: 0;

margin: 0;

background: url(img/bg.png);

}

CSS背景知識點

1、background-color -- 背景色,定義背景的顏色

: 顏色表示法

transparent: 透明

inherit: 繼承

2、background-image -- 定義背景圖片

: URI

none: 無

3、background-repeat -- 定義背景圖片的重復方式

repeat: 平鋪整個頁面,左右與上下

repeat-x: 在x軸上平鋪,左右

repeat-y: 在y軸上平鋪,上下

no-repeat: 圖片不重復

4、background-position -- 定義背景圖片的位置

1、水平

left: 左

center: 中

right: 右

2、垂直

top: 上

center: 中

bottom: 下

3、垂直與水平的組合

x-% y-%

x-pos y-pos

inherit: 繼承

p {

background-image:url('list-orange.png');

background-position:right bottom ;

background-repeat:no-repeat;

}

div {

background-image:url('list-orange.png');

background-position:50% 20% ;

background-repeat:no-repeat;

}

5、background-attachment -- 定義背景圖片隨滾動軸的移動方式

取值: scroll | fixed | inherit

scroll: 隨著頁面的滾動軸背景圖片將移動

fixed: 隨著頁面的滾動軸背景圖片不會移動

inherit: 繼承

初始值: scroll

總結

以上是生活随笔為你收集整理的css 设置背景图一半_CSS背景图设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。