css網頁中設置背景圖片的方法詳解

在css代碼中設置背景圖片的方法,包括背景圖片、背景重復、背景固定、背景定位等

用css設置網頁中的背景圖片,主要有如下幾個屬性:
?

1,背景顏色 {">說明:參數取值和顏色屬性一樣
注意:在HTML當中,要為某個對象加上背景色只有一種辦法,那就是先做一個表格,在表格中設置完背景色,再把對象放進單元格。
這樣做比較麻煩,不但代碼較多,還要為表格的大小和定位傷些腦筋。現在用CSS就可以輕松地直接搞定了,而且對象的范圍很廣,可以是一段文字,也可以只是一個單詞或一個字母。
例子:給部分文字加背景顏色給部分文字加背景顏色
表格背影顏色:

?

代碼示例:
style=" margin-left: 0px; padding: 0px; clear: both; line-height: 24px;">2.背景圖片:background-image

?

語法:{background-image: url(URL)|none}
說明: URL就是背景圖片的存放路徑。如果用“none”來代替背景圖片的存放路徑,將什么也不顯示。
例子:給部分文字加背景圖片

代碼示例:
.imgbgstyle { background-image: url(logo.gif)}

3.背景重復:background-repeat

語法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
作用:背景圖片重復控制的是背景圖片平鋪與否,也就是說,結合背景定位的控制可以在網頁上的某處單獨顯示一幅背景圖片

說明:參數取值范圍:
?

·inherit 繼承
·no-repeat 不重復平鋪背景圖片
·repeat
·repeat-x 使圖片只在水平方向上平鋪
·repeat-y 使圖片只在垂直方向上平鋪

注意:如果不指定背景圖片重復屬性,瀏覽器默認的是背景圖片向水平、垂直兩個方向上平鋪。

4.背景固定:background-attachment

語法:{background-attachment:fixed|scroll}
說明:參數取值范圍
?

·fixed:網頁滾動時,背景圖片相對于瀏覽器的窗口而言,固定不動
·scroll:網頁滾動時,背景圖片相對于瀏覽器的窗口而言,一起滾動

注意:背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設置背景圖片固定屬性,瀏覽器默認背景圖片隨網頁的滾動而滾動。為了避免過于花哨的背景圖片在滾動時傷害瀏覽者的視力,所以可以解除背景圖片和文字內容的捆綁,該為和瀏覽器窗口捆綁。

例子:使背景圖案不隨文字“滾動”的CSS
?

代碼示例:
BODY { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed }

5.背景定位:background-position

語法:{background-position:數值|top|bottom|left|right|center}
作用:背景定位用于控制背景圖片在網頁中顯示的位置。
說明:參數取值范圍
?

·帶長度單位的數字參數
·top:相對前景對象頂對齊
·bottom:相對前景對象底對齊
·left:相對前景對象左對齊
·right:相對前景對象右對齊
·center:相對前景對象中心對齊
?

·比例關系

關鍵字解釋:
top left = left top = 0% 0%

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=bhkb0ab&title=css網頁中設置背景圖片的方法詳解

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/370529.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370529.shtml
英文地址,請注明出處:http://en.pswp.cn/news/370529.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

node-sass安裝不成功的問題

SASS_BINARY_SITEhttps://npm.taobao.org/mirrors/node-sass/ npm install node-sass 簡單粗暴的執行上述的命令。轉載于:https://www.cnblogs.com/czaiz/p/6918114.html

npm升級依賴包_Taro跨端開發之依賴管理

昨天跑的好好項目,今天跑不起來我們在開發周期比較長的前端項目的時候,必然會遇到依賴管理的問題. 我們在開發項目的時候,我們用了大量的三方庫.這些三方的依賴庫時不時的會更新自己的代碼.第三方依賴庫的代碼更新會很容易造成代碼運行的不穩定, 比如昨天還跑的好好的項目,另一…

QOTD:Java線程與Java堆空間

以下問題很常見,并且與OutOfMemoryError有關:在JVM線程創建過程和JVM線程容量期間無法創建新的本機線程問題。 這也是我向新技術候選人(高級職位)提出的典型面試問題。 我建議您在查看答案之前嘗試提供自己的答復。 題&#xff1…

sql查詢重復項

select * from [表A] where id in (select id from [表A] group by id having count(id) >1 )轉載于:https://www.cnblogs.com/wuyujie/p/7885017.html

java util logging_簡單日志記錄,使用java.util.logging

jspservletJavaBean模式下,可以做個簡單的日志記錄,日志文件保存在服務器.(Tomcat)package controller;import java.io.File;import java.io.IOException;import java.util.logging.FileHandler;import java.util.logging.Level;import java.util.logging.Logger;import javax.…

超級高鐵

超級高鐵 作者:武培,高培焱 作品來源:實踐 美國電動汽車公司特斯拉和美國科技公司ET3都公布了“真空管鋼運輸”計劃,特斯拉將其命名為“超級高鐵”,ET3因列車外觀酷似膠囊因而稱之為“吃膠囊”列車。根據ET3公司的介紹…

使用Spring @Autowired List的責任鏈

在Spring 3.1中,有一種方法可以自動填充類型化的List,這在您想在代碼中稍微進行去耦和清理時非常方便。 為了向您展示它是如何工作的,我將實現一個簡單的責任鏈,該責任鏈將為通過的用戶打印一些問候。 讓我們從我們擁有的&#…

設計模式 建造者模式 與 Spring Bean建造者 BeanDefinitionBuilder 源碼與應用

建造者模式 定義: 將一個復雜對象的構建與它的表示分離,使得同樣的構建過程可以創建不同的表示主要作用: 在用戶不知道對象的建造過程和細節的情況下就可以直接創建復雜的對象如何使用: 用戶只需要給出指定復雜對象的類型和內容, 建造者模式負責按順序創建復雜對象…

java 布隆過濾器_什么是布隆過濾器(Bloom Filter)?

在日常工作中,有一個比較常見的需求,就是需要判斷一個元素是否在集合中。例如以下場景:給定一個IP黑名單庫,檢查指定IP是否在黑名單中?在接收郵件的時候,判斷一個郵箱地址是否為垃圾郵件?在文字…

STM32上使用JSON

一、STM32工程中添加JSON 最近在一網2串項目,串口和網口之間可能需要定義一下簡單的通信協議,而通信協議上則需要去定義一下通信的數據格式,上次聽劍鋒說要用Json來定義,目前查了下資料具體如何去應用還不 會。因為最新的KEIL上支…

Flex 學習

Flex案例一&#xff1a; 1 <html>2 <head>3 <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> 4 <title>無標題</title>5 <style type"text/css">6 body,h1,h2,h3,h4,…

Cocos2d-X中實現自己定義菜單處理事件

當用戶點擊再松開后才會響應菜單事件&#xff0c;而在游戲中有些游戲須要玩家點擊后就處理事件。如玩坦克大戰的時候&#xff0c;玩家是點擊一下就發射子彈。并是點擊松手后發射子彈&#xff0c;在Cocos2d-X中沒有這樣的消息。以下就通過自己定義的方式實現當用戶點擊后就調用處…

java linkedhashset_java之LinkedHashSet

LinkedHashSet是Set集合的一個實現&#xff0c;具有set集合不重復的特點&#xff0c;同時具有可預測的迭代順序&#xff0c;也就是我們插入的順序。并且linkedHashSet是一個非線程安全的集合。如果有多個線程同時訪問當前linkedhashset集合容器&#xff0c;并且有一個線程對當前…

使用Spring Integration輪詢http端點

如果您想用Spring Integration編寫一個流程來輪詢HTTP端點并從http端點收集一些內容以進行進一步處理&#xff0c;那有點不直觀。 Spring Integration提供了幾種與HTTP端點集成的方式- Http出站適配器–將消息發送到http端點 Http出站網關–將消息發送到http端點并收集響應作…

python模塊離線安裝_離線安裝db2的python模塊ibm_db

1、為什么要離線安裝 沒網&#xff0c;在銀行工作&#xff0c;服務器環境配置&#xff0c;完全離線&#xff08;本來五分鐘搞定的事情&#xff0c;非要搞一天。我服&#xff01;&#xff01;&#xff09; 2、安裝步驟 視情況而定。 3。一個下載db2的client包&#xff0c;官網下…

Jmeter 場景設計

今天的業務場景是&#xff1a; 1.管理員登錄后臺---登錄成功后添加一個某類型的產品---產品添加成功后&#xff0c;再為該產品添加10個排期。 2.管理員登錄后臺--登錄成功后添加多個不同類型產品---產品全部添加完成后&#xff0c;依次為所有產品添加10個排期。 這是兩種不同的…

Android IPC機制(五)用Socket實現跨進程聊天程序

1.Socket簡介 Socket也稱作“套接字“&#xff0c;是在應用層和傳輸層之間的一個抽象層&#xff0c;它把TCP/IP層復雜的操作抽象為幾個簡單的接口供應用層調用以實現進程在網絡中通信。它分為流式套接字和數據包套接字&#xff0c;分別對應網絡傳輸控制層的TCP和UDP協議。TCP協…

ArcGIS 網絡分析[4] 網絡數據集深入淺出之連通性、網絡數據集的屬性及轉彎要素...

前面介紹完了如何創建網絡數據集、如何使用網絡分析功能&#xff0c;當然還有的讀者會迷惑于一些更深層次的問題&#xff0c;比如網絡數據集的連通性問題等。 因為不可能面面俱到&#xff0c;我只能挑重點來闡述&#xff0c;我覺得網絡數據集的連通性、屬性和轉彎是初學者中比較…

java獲取byte 長度_java獲取字節的長度.

我們經常要獲取中文,數字,或者英文字符所占字節的長度,下面就列出各種編碼格式下所占字節的長度:代碼如下:package pack.java.midea.dao;import java.io.UnsupportedEncodingException;/*** 測試;* author zhouhaitao* 2012-5-17*/public class Test {/*** param args* throws …

Batoo JPA –比領先的JPA提供商快15倍

介紹 我早在2000年代就喜歡JPA 1.0。 我甚至在穩定版本發布之前就將其與EJB 3.0一起使用。 我非常喜歡它&#xff0c;因此我為JBoss 3.x實現貢獻了一些零碎的部分。 那時我們公司規模還很小。 創建新功能和應用程序比性能更重要&#xff0c;因為我們有很多想法&#xff0c;我…