首先給圖片添加一個div,設置其寬高及基本屬性,其次把div中的display元素設置成flex,最后給img添加align-items:center屬性,代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style tpye="text/css">
body{
background:#000
}
div{
width: 900px;
height: 800px;
background:deeppink;
display: flex;
align-items: center;
}
div img{
width: 579px;
height: 282px;
align-items: center;
}
</style>
</head>
<body>
<div>
<img src="html.png" alt="">
</div>
</body>
</html>
看下效果
首先創建一個div,以及對有圖片的div設置樣式,給img的父級添加一個diaplay,并且屬性為table,并且把包含圖片的div中的display屬性設置成table-cell,最后給有圖片的div設置成vertical-align: middle; 屬性,代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style tpye="text/css">
body{
background: #bbb;
}
div{
display: table;
width: 900px;
height: 700px;
background: #f3f3f3;
display: table-cell;
vertical-align: middle;
}
div img{
width: 282px;
}
</style>
</head>
<body>
<div>
<img src="html.png" alt="">
</div>
</body>
</html>
效果圖:
為Web開發人員,最常見的事情之一就是更改HTML元素的背景顏色。但是,如果您不了解如何使用CSS background-color屬性,可能會產生混淆。在本文中,我們討論以下幾點
1.HTML元素的默認背景色值
2.如何更改div的背景顏色,這是非常常見的元素
3.該background-color屬性會影響CSS盒子模型的哪些部分,以及
4.此屬性可以采用的不同值。
div的默認背景顏色是transparent。因此,如果您不指定div的背景色,它將顯示其父元素的背景色。
在此示例中,我們將更改以下div的背景顏色。
<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>
沒有任何樣式,它將在視覺上轉換為以下內容。
讓我們通過向類中添加樣式來更改div的背景顏色。您可以通過嘗試HTML文件中的示例進行操作。
<style>
.div-1 {
background-color: #EBEBEB;
}
.div-2 {
background-color: #ABBAEA;
}
.div-3 {
background-color: #FBD603;
}
</style>
<body>
<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>
</body>
這將導致以下結果:
看!我們已成功更改了該div的背景顏色。接下來,讓我們更多地了解此屬性。讓我們看看background-color屬性如何影響CSS-box模型的各個部分。
根據CSS框模型,所有HTML元素都可以建模為矩形框。每個盒子由4個部分組成,如下圖所示。
如果您不熟悉Box模型,則可以查閱相關資料。問題是,當您更改div的背景顏色時,Box模型的哪一部分會受到影響?簡單的答案是填充區域和內容區域。讓我們通過一個例子來確認這一點。
<style>
body {
background-color: #ABBAEA;
}
div {
height: 200px;
margin: 20px;
border: 5px solid;
background-color: #FBD603;
}
</style>
<body>
<div>
<p>This is the parent div which contains the div we are testing</p>
<div>
<p>This example shows that changing the background color of a div does not affect the border and margin of the div.</p>
</div>
</div>
</body>
這將導致:
從上面的示例中,我們可以看到空白區域和邊框區域不受背景顏色變化的影響。我們可以使用border-color屬性更改邊框的顏色。邊距區域保持透明,并反映父容器的背景色。
最后,讓我們討論background-color屬性可以采用的值。
就像color屬性一樣,background-color屬性可以采用六個不同的值。讓我們通過一個示例考慮三個最常見的值。在示例中,我們將div的背景色設置為具有不同值的紅色。
<style>
/* Keyword value/name of color */
.div-1 {
background-color: red;
}
/* Hexadecimal value */
.div-2 {
background-color: #FF0000;
}
/* RGB value */
.div-3 {
background-color: rgb(255,0,0);
}
</style>
<body>
<div class="div-1">
<p>The background property can take six different values.</p>
</div>
<div class="div-2">
<p>The background property can take six different values.</p>
</div>
<div class="div-3">
<p>The background property can take six different values.</p>
</div>
</body>
注意,它們的結果都是相同的背景色。
該background-color屬性可以采用的其他值包括HSL值,特殊關鍵字值和全局值。這是每個例子。
/* HSL value */
background-color: hsl(0, 100%, 25%;
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;
/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
設置元素的背景色時,重要的是要確保背景色和其包含的文本顏色的對比度足夠高。這是為了確保弱視人士可以輕松閱讀文本。
第一個div的背景顏色與文本顏色之間的對比度不夠高,每個人都看不到。因此,除非您是唯一正在使用的網站,并且您的視力非常好,否則應避免這種顏色組合。
第二個div在背景顏色和文本顏色之間具有更好的對比度。因此,它使人們更容易閱讀和閱讀。
在本文中,我們看到了如何更改div的背景顏色。我們還討論了CSS Box模型的哪些部分受背景顏色變化的影響。最后,我們討論了background-color屬性可以采用的值。
希望本文對您有所幫助。謝謝閱讀。
網頁美工設計培訓老師了解,當w3c剛出的時候,三大門戶十分不屑。清一色的table遍布整個首頁,可是這樣導致的問題不久就暴露出來了,搜索引擎爬蟲難以解析復雜的table,而樣式的改版也極為難受。
div+css,這個布局中,div承載的是內容,而css承載的是樣式。內容和樣式的分離對于所見即所得的傳統table編輯方式確實是一個很大的沖擊,尤其是設計人員很難接受設計一個他們不能立即看到的樣式。不過div+css的好處實在是太明顯了:
1、搜索引擎親和力:
搜索引擎不會在意一個頁面的設計或者構成。搜索引擎不可能“欣賞”設計漂亮新穎的頁面;也不會去“排斥”顏色搭配丑陋的頁面。它們只是默默地拿到它們需要的內容就離開。如果一個頁面中涵蓋了大量的table來描述構架,試想搜索引擎要花多大的代價才可以拿到真正有用的信息呢?
一般來說,table構架描述的頁面,樣式結構和內容信息大小比可能達到1:1甚至更高。而CSS+DIV構架的頁面,雖然在客戶端看來下載一個復雜的CSS 也要占用差不多的帶寬,然而搜索引擎可以很方便的繞過這個css,而直接抓去div中的內容。這便是div的優勢所在。帶寬的稍多占用,完全顯得微不足道,更何況一個冗余的table設計架構如果代碼寫的不好會占用更多的帶寬。
2、重構頁面的方便性。
網頁美工設計培訓老師覺得這個應用最經典的例子就是各大blog程序了。就如現在我用的LBS系統,以及流行的PJBLOG、php下面的WP、MT,都是采用div+css構架。內容和樣式的分離導致我們在重構頁面布局(更換皮膚)的時候,只用針對每一個div元素重新定義其具體位置、樣式就行了。而在原來的table基礎上進行改版,幾乎必須改變所有的內容注入渠道,實在是太過于麻煩。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。