整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
首先給圖片添加一個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小時內與您取得聯系。
