展示圖片
- 使用 <img /> 標(biāo)簽;
- ::after 和 ::before 設(shè)置圖片;
- 鼠標(biāo) hover 自定義光標(biāo)樣式;
- border-image 自定義邊框圖案;
- list-style-image 設(shè)置列表項(xiàng)樣式;
- background-image 設(shè)置背景圖片;
/* 居中不重復(fù)的背景圖片 */
background: url(../asset/img/logo.jpg) no-repeat center;
/* x軸重復(fù) */
background: url(../asset/img/logo.jpg) repeat-x;
/* background 是以下屬性值的縮寫
image: 背景圖片
color: 背景顏色
repeat: 定義圖片重復(fù)的方式 可選值 repeat-x/repeat-y/repeat/space/round/no-repeat
size: 背景圖片大小 可選值 contain/cover/百分比/具體像素
clip: 背景圖片延伸到哪個(gè)位置 可選值 text/border-box/padding-box/content-box
origin: 背景圖片相對于哪個(gè)區(qū)域開始擺放 border-box/padding-box/content-box
attachment: 背景圖片在視口內(nèi)固定還是隨包含它的區(qū)塊滾動(dòng) scroll/fixed/local
position: 相對origin為圖片設(shè)置初始位置 left/bottom/top/right/center/百分比/具體像素
position-x: 設(shè)置背景圖片在水平方向的位置 left/center/right/百分比/具體像素
position-y: 設(shè)置背景圖片在垂直方向的位置 top/center/bottom/百分比/具體像素
*/
div::after{
content: url(../asset/img/logo.jpg);
}
cursor: url(../asset/img/cursor.jpg) auto;
/* border-image: source slice width outset repeat|initial|inherit; */
border: 10px solid transparent;
border-image: url(./images/logo.png) 30 30 10 round;
/* 列表項(xiàng)標(biāo)記樣式 */
list-style-image: url(./images/checked.png);
圖片縮放
①純css實(shí)現(xiàn)縮放
/* 方式一 */
transform: scale(.8);
/* 方式二 */
zoom: 50%疑故；
②圖片隨鼠標(biāo)滾輪縮放
/* html */
<img src="./images/desktop.jpg" alt="" onmousewheel="return zoom(this)" />
/* javascript */
function zoom(el) {
var zoom = parseInt(el.style.zoom, 10) || 100;
zoom += event.wheelDelta / 100;
console.log(event.wheelDelta);
if (zoom > 0) {
el.style.zoom = zoom + '%';
}
return false;
}
圖片填充設(shè)置
object-fit 可以設(shè)置替換元素 (<img /> <iframe>...) 的內(nèi)容如何填充到容器中，在<img /> 元素中的使用如下:
object-fit: contain;
/* object-fit 包含以下幾種值,
fill: 默認(rèn)值祠肥，填充到腥，圖片填滿容器，可能會(huì)改變寬高比乔宿，導(dǎo)致圖片拉伸;
contain: 包含捞奕，整個(gè)圖片會(huì)保持寬高比展示在容器中琅拌，可能會(huì)被縮放，部分背景會(huì)空白;
cover: 覆蓋婚度，圖片保持寬高比填滿容器蘸秘，圖片可能會(huì)被裁剪;
none: 保持圖片原尺寸和比例;
scale-down: 等比縮小，類似依次設(shè)置了 none 和 contain,最終展示尺寸較小的那個(gè);
*/
圖片位置設(shè)置
object-position 可以設(shè)置替換元素的內(nèi)容在容器中的位置蝗茁，可用 left醋虏、top 等方位值控制，也可以用具體的數(shù)值表示哮翘，在<img /> 元素中的使用如下:
object-position: left top;
/*
object-position: 水平方向可能的值 垂直方向可能的值
object-position: left/center/right top/center/bottom;
object-position: 10px 15px;
如果只設(shè)置了一個(gè)值颈嚼，則默認(rèn)另一個(gè)方向的值為 center
如：object-position: top; => object-position: center top;
*/
圖片熱區(qū)
定義：在圖片中指定某個(gè)區(qū)域，當(dāng)用戶點(diǎn)擊該區(qū)域內(nèi)時(shí)可以鏈接跳轉(zhuǎn)到指定頁面饭寺。
應(yīng)用場景：中國地圖圖片點(diǎn)擊具體的省份跳轉(zhuǎn)到各省對應(yīng)的官網(wǎng)阻课。
創(chuàng)建圖片熱區(qū):
/*
<area shape="rect/circle/poly" href="" coords="" target="_blank/_parent/_self/_top">
shape: 規(guī)定區(qū)域的形狀;
href: 目標(biāo) url;
coords: 坐標(biāo); shape="rect" => x1,y1,x2,y2; shape="circ" => x,y,radius
target: 在何處打開目標(biāo) url
*/
<img src="../asset/images/china.jpg" usemap="#mapname"/>
<map name="mapname" id="mapname">
<area shape="rect" href="" coords="0,0,50,50"/>
</map>
濾鏡屬性
filter 屬性可以調(diào)節(jié)元素的視覺效果，如設(shè)置圖片灰度佩研、透明度柑肴、飽和度等
filter: none | 默認(rèn)
blur(px) | 高斯模糊
brightness(%) | 亮度
contrast(%) | 對比度
drop-shadow() | 陰影
grayscale(%) | 灰度
hue-rotate() | 色相旋轉(zhuǎn)
invert(%) | 反相
opacity(%) | 透明度
saturate(%) | 飽和度
sepia(%) | 深褐色
url();
3 像素bug
描述：img 標(biāo)簽渲染之后下方會(huì)出現(xiàn)幾個(gè)像素（谷歌是 4px, 火狐 3.5px）的空白；
原因：img 是行內(nèi)元素旬薯，默認(rèn)display：inline; 它與文本的默認(rèn)行為類似晰骑，下邊緣是與基線對齊，而不是貼緊容器下邊緣，所以會(huì)有幾像素的空白硕舆；
解決辦法：
把 img 設(shè)置為display: block;
給 img 和其父元素都設(shè)置 vertical-align: top秽荞；讓其 top 對齊而不是 baseline 對齊；
給 img 父元素設(shè)置 line-height: 0;
