⑴ html網頁中如何把背景圖設置為居下
你是想把原來的居上平鋪改成居下平鋪?還是想原來的居上保留再來一個居下平鋪?
如果是居上改成居下很簡單 找到原來的樣式把background-position:top改成background-position:bottom 就ok了。
如果你想在原來基礎上再定義一個居下平鋪,那比較麻煩,要看你那頁面結構來說,如果只是一個html標簽那告訴你不好實現。如果有結構有兩層,並且這個背景定義在外面的容器里,那麼裡面的容器你再寫一個居下的樣式就可以了。如果定義在裡面容器里那麼外面的你再定義一個居下的樣式就可以了。前提是裡面的樣式的圖片只能顯示再上面部分,並且沒有定義背景色。也就是不能遮擋後面層的背景顯示就可以。
⑵ html怎麼把背景圖片置於最底下
background:url(bgimage.gif) no-repeat center bottom。
center 這句是圖片位置橫向居中。
後面的這句bottom 是圖片位置豎向最底部。
⑶ 網頁背景圖片怎麼設置
1、首先打開Atom編輯器導入項目文件夾,先創建一個index.html的文件。定義一下html文件的主信息,如下圖所示:
設計注意:
1、配色問題 一個網頁的色彩最好不要超過3種,一面視覺效果混亂,用色柔和,對比度強的色彩不能應用於一般網站,時尚網站使用還可以。一般不好搭配的顏色,用灰度搭配。
2、字體問題
很重要的一個問題,用標准字標准色,這是一個規范,行距一般控制在20px左右,不要太小,也不要太大,自己大小注意,中文12px,英文11px或者10px。
3、布局規范
布局是非常重要的,考慮客戶瀏覽習慣以及他們想展現的內容,並且優化。一個網頁,如果布局不合理的話不但影響瀏覽,而且非常難看。
⑷ 在網頁製作中,通常用什麼來控制文本,圖片等各種元素的位置
碼字不易,希望採納。
既然問到的網頁元素的位置問題,那麼就可以去參考CSS的具體屬性,以下是常見屬性:
(一)對於文本:
1.text-align:center,right,justify
當text-align設置為"center",居中分布
當text-align設置為"right", 靠右分布
當text-align設置為"justify",均勻分布
2.text-indent:50px
當text-indent設置為具體的px,代表首行縮進具體的px
(二)對於圖片:
float:left,right
當float設置為left時,向左浮動
2.padding:10px 或者 margin:10px
當padding或margin設置具體的px時,前者代表內邊距,後者代表外邊距
當marging設置為margin:0 auto;代表水平居中
3.position:absolute,relative
當position設置為absolute,代表以瀏覽器原點為0點進行設置位置
當position設置為relative,代表以自身位置為原點進行位置設置
以上,都是常規的位置設置,如果使用flex布局,還會有更簡單的設置方法,比如水平垂直居中,可以按下列方法設置
display:flex;
justify-content:center;
align-items:center;
⑸ 在網頁設計中圖片怎麼和下標字對齊
我自己做法是:
<img src=「../imagefiles/1_06c573b9-b935-4a85-a413-963ef0306998.jpg」 /><span>寧波埃美柯水管</span>
然後給span寫樣式:「display:block;」使文字所在的SPAN變成塊狀,然後再定義SPAN的寬度與圖片一樣,最後再設置SPAN內容居中就好了
⑹ asp網頁設計如何設定圖片的位置
首先說明下網頁載入圖片的方法:
<img src="圖片路徑" width="寬度" height="高度" alt=「圖片名稱」>
1、table表格中載入圖片
<table>
<tr>
<td>這是第一個單元格</td>
<td><img src="圖片路徑"></td>
</tr>
</table>
2、div+css通過圖層設定圖片位置
<div style="position:relative;background:#CCCCCC;width:300px; height:300px;">
<div style="position:absolute;background:#FF0000;width:100px; height:100px; top:250px; left:250px;"></div>
</div>
⑺ html css怎麼樣才能把文字放在圖片的正下方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 400px;
height: 250px;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div>
<img width="200px" height="150px" src="dddd.png" />
<br/>
你啥時候嫁給我,hahahahaahahahahahaah
</div>
</body>
</html>
————————————————
這樣就會能夠將文字放在圖片的正下方,得到以下圖片:
文字位於正右邊的方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 400px;
height: 250px;
background-color: red;
}
.d2{
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img width="200px" height="150px" src="dddd.png" />
你啥時候嫁給我
</div>
</body>
</html>
⑻ html中,怎麼把背景圖片置於最低層
1、用css的z-index的屬性就可以實現。首先新建一個html文件,在文件中寫入一個div容器和一個圖片:
⑼ 網頁設計問題:文字怎樣緊靠在圖片正下方
或者把文字和圖片分別放到上下2個表格裡面