導航:首頁 > 圖片大全 > css如何固定頁面圖片

css如何固定頁面圖片

發布時間：2022-04-21 12:47:04

① 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%

② css如何固定頁面

.div{ width:100px; height:100px; position:fixed; top:100px; left:0;}使某個div固定漂浮

③ CSS 怎麼固定圖片位子

那是你的圖片容器不固定的關系（把頁面代碼和CSS發上來）
====================
我暈，都用float:right;不動才怪：

#head_r_t {
FONT-SIZE: 13px; FLOAT: left; MARGIN: 8px 0px 0px; WIDTH: 734px; HEIGHT: 70px; TEXT-ALIGN: right;
}
#head_r_t A {
COLOR: #ffffff
}
#head_r_t_m {
FLOAT: right
}

改成float:left

④ 如何用css精確定位小圖片的位置

如何用css精確定位小圖片的位置

首先設置固定圖片的css屬性是background-attachment
background-attachment它有兩個屬性值fixed/scroll
background-attachment：fixed;表示固定圖片，圖片不隨著頁面滾動而滾動。
background-attachment：scroll；表示不固定圖片，圖片隨著頁面滾動而滾動
background-position這個屬性用來定點陣圖片的位置。
我們重點給大家分享background-position這個屬性
2background-position;的語法結構，用水平和垂直位置進行定位。
background-position:x y;
其中，x有三個值：left(左)，center(中),right(右)。用來設置水平位置；
y也有三個值：top（上）,center(中)，bottom(下)。用來設置垂直位置；
兩個屬性值得中間一定要用英文的空格，隔開。
代碼如下：
<style type="text/css">
<!--
#img{
background-image:url("圖片存放路徑"); /*插入背景圖*/
background-repeat:no-repeat; /*設置圖片不重復*/
background-color:#00ffff; /*設置背景顏色*/
background-position:left center; /*用居中對齊設置水平距離，用下面對齊設置垂直距離*/
width:400px; height:150px; /*設置寬度和高度*/
}
-->
</style>
<div id="img"></div>
3background-position:左邊距離上邊距離。這個用來找圖片。
比如一張大圖上面有很多小圖，你只想用到其中一個小圖就用這個找。
代碼如下：
<html>
<head>
<style type="text/css">
#main{
{
background-image:url("圖片存放路徑"); /*插入背景圖*/
background-repeat:no-repeat; /*設置圖片不重復*/
background-color:#00ffff; /*設置背景顏色*/
background-position:60px 50px; /*設置水平距離和垂直距離*/
width:400px; height:200px;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
</html>

⑤ css 如何固定網頁背景，並且自動適應瀏覽器大小！

1、 css不能控制背景圖的大小, 有的屏幕是長方形的，有的還是正方形的了，你如果只控制它的寬，沒准就會出現滾動條，你寬高都控制，它就變形了，所以說只能讓大的瀏覽器顯示的多一些，小的瀏覽器顯示的少一點，樣式代碼如body {background:url("1.jpg") no-repeat center top fixed;}2、如果是在網頁裡面插入圖片的話，可以控制圖片的大小，控制它的寬，高估計就會出現滾動條，控制高，估計寬會出現滾動條，都控制，則變形，代碼：
<body onload="auto_height()">
<script>
function auto_height()
{
var w= document.documentElement.clientWidth;
var high = document.getElementById("d2").getElementsByTagName("img")[0];
high.width=w;
}
</script>
<div id="d2"><img src="11.jpg" /></div>

</body>
綜上所訴，你的要求是達不到的，建議你選第一個方法，我們做網站都是這么做的。

⑥ css中怎樣設置圖片固定

background-attachment 有2個值 { fixed //圖片不隨頁面滾動
scroll;//圖片會滾動這個是默認值
如果想測試效果請不要設置 no-repeat

⑦ css 如何固定網頁背景，並且隨瀏覽器的像素大小而變！

css3可以做到兼容ie9和市面上的多數非IE內核瀏覽器，它的

background-size可以設置2個值，1個為必填，1個為可選。

其中第1個值用於指定背景圖的width，第2個值用於指定背景圖的height，如果只給background-size設置1個值，則第2個值默認為auto（cover和contain特定值除外）。

div{

background-image:url(test.png);

background-repeat:no-repeat;

background-size:100px;

}

cover表示覆蓋整個容器。你要背景全部那麼需要注意的是html,body {height:100%}

當然以上內容不兼容低版本IE瀏覽器和不兼容css3規則的瀏覽器。

你說的背景整張顯示，我之前項目遇到過這樣的需求。我是直接用腳本寫的。

實現思路是用圖片絕對定位在網站最底層，z-index屬性設置成負值。用腳本判斷窗口大小，在每次窗口大小發生改變時監聽事件捕獲長寬，賦值給這張「地圖」。

⑧ 想把一個圖放在網頁的固定位置上,應該用CSS的什麼功能

嗯.可以設置圖片的CSS屬性
<style>

</style>
然後在HTML中把圖片調用出來.要配合/更改上面相應的屬性就OK了.

⑨ 如何用css設置網頁背景固定不動

<styletype="text/css">
body
{
background-image:url(d:/bg.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>

如何只是設置不平鋪，可能會讓背景圖片隨著頁面文字滾動，所以還是要對背景圖片設置fixed固定。

⑩ 如何用css使一個用絕對定位的圖片定位在網頁一個具體位置,不隨網頁大小等改變位置!

需要准備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

閱讀全文

與css如何固定頁面圖片相關的資料

熱點內容

王者英雄女英雄海報高清圖片發布：2025-02-01 03:19:53 瀏覽：516

剪兩邊的發型男生圖片發布：2025-02-01 03:18:10 瀏覽：444

男生炫酷短發圖片發布：2025-02-01 03:14:59 瀏覽：208

王俊凱手語可愛圖片發布：2025-02-01 02:40:05 瀏覽：718

女孩穿衣服裙子搭配圖片發布：2025-02-01 02:40:04 瀏覽：352

寶寶圖片可愛頭像圖片卡通發布：2025-02-01 02:36:59 瀏覽：557

微信牆紙圖片文字個性發布：2025-02-01 02:36:59 瀏覽：610

如何製作日歷標記圖片發布：2025-02-01 02:35:13 瀏覽：34

怎樣可以讓word圖片下垂發布：2025-02-01 02:31:04 瀏覽：77

熱巴掉衣服圖片發布：2025-02-01 02:18:56 瀏覽：272

可愛貓貓模組圖片發布：2025-02-01 02:02:25 瀏覽：27

wps里如何把圖片轉換成高清圖發布：2025-02-01 02:02:24 瀏覽：131

平靜圖片文字發布：2025-02-01 01:53:02 瀏覽：90

日本日元圖片大全集發布：2025-02-01 01:51:37 瀏覽：307

動漫黑夜抽煙圖片發布：2025-02-01 01:51:26 瀏覽：805

女性得痔瘡後肛門圖片大全發布：2025-02-01 01:49:47 瀏覽：442

圖片動漫大氣發布：2025-02-01 01:48:18 瀏覽：59

今天我休息圖片可愛發布：2025-02-01 01:43:26 瀏覽：848

虎頭像圖片動漫男生發布：2025-02-01 01:40:26 瀏覽：527

四年級簡單手工製作大全圖片發布：2025-02-01 01:37:12 瀏覽：900