CSS樣式設定網頁背景

2021-08-13 15:51:29 字數 988 閱讀 5754

首先我們要知道在html、css裡面,有關背景的設定都與background有關,比如background-color:background-image:等

1、background-color屬性-設定背景顏色

語法:background-color:顏色;

這裡的顏色可以直接用顏色名字,也可以使用三元色、十六進製制等;

如:background-color:rgba(0,0,0,.8);

2、background-image屬性-設定背景影象

如:background-image:url(火影/1.png);

3、background-repeat屬性-背景重複

語法:background-repeat:重複方式;

如:background-repeat:repeat;

4、background-position屬性-設定背景的位置

語法:background-position:位置;

相關位置:length(與邊界的距離,cm、mm、px) 、percentage(頁面的寬度和高度的百分比) 、top(頂部)、 center(居中) 、bottom(底部)、 left 、right;

5、background-attachment屬性-控制背景不動

語法:background-attachment:屬性值;

在瀏覽器中瀏覽頁面時,當拖動滾動條時背景也會隨之移動,而此屬性就是固定背景的位置。

6、background-size屬性-背景大小

語法:background-size:屬性值;

相關屬性值:length(長度值,如:13px 13px表示長寬都是13px)、percentage(原圖的百分比0%~100%)、cover(保持寬高比,剛好覆蓋定義區域)、contain(同cover);

7、background-origin屬性-控制背景現實區域

語法:background-origin:屬性值;

此屬性是方便控制背景的顯示位置;

CSS網頁製作技巧之控制網頁背景

我想大家常常為一些比較合適於自己的網頁背景的而發愁吧,這個我想也是有的,因為這些不是太大就是太小,或者太亂,那麼有沒有辦法讓能合自己的主頁的胃口呢?答案是肯定的。想知道怎麼來實現嘛,好吧,大家現在開始跟著我做,我保證大家一定一學就會。不過,我想在網上 成家 的朋友一般分為在網咖裡 開業 就像我一樣,...

CSS實現網頁背景顏色漸變的效果。

來自 為了顯示乙個漸變而專門製作乙個的做法是不靈活的,而且很快會成為一種不好的做法。但是遺憾的是,截至寫這篇文章,可能還必須這樣做,但是希望不會持續太久。多虧firefox 和safari chrome,我們現在可以使用最少的努力實現強大的漸變。在本文中,我們將展示css漸變的簡單實現以及該屬性在m...

CSS速成教程 介紹網頁背景 3

css 允許應用純色作為背景,也允許使用背景影象建立相當複雜的效果 屬性描述 background attachment 背景影象是否固定或者隨著頁面的其餘部分滾動 background color 設定元素的背景顏色 background image 把設定為背景 background posit...