html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

2018年7月27日 星期五

div background

DIV 內置入 jpg 圖片

底圖就會依照 DIV 區塊的大小,等比縮放到區塊中。
用 CCS background-image: center,background-repeat: no-repeat 完成。

<style type="text/css">
.a17524{
background-image: url("https://4.bp.blogspot.com/-1ngd1eaCUio/W1vJU2294II/AAAAAAAAR24/Zwc1XQKaMlIj_m6m1w0ADCVCMSzONjlQwCLcBGAs/s1024/ck20180728.jpg");
-moz-background-size: contain;     /*底圖就會依照區塊的大小,等比縮放到區塊中*/
-o-background-size: contain;         /*底圖就會依照區塊的大小,等比縮放到區塊中*/
-webkit-background-size: contain; /*底圖就會依照區塊的大小,等比縮放到區塊中*/
background-position: center;         /*置中*/
background-repeat: no-repeat;     /*背景圖案不重複*/
border:2px solid #000000;            /*邊框樣式與顏色*/
background-color:#CCCCCC;      /*背景的顏色*/
color: fuchsia ;
font-size: 20px ;
}
</style>


範例的效果 :
<div class="a17524" style="height: 150px; width: 400px;">

<div class="a17524" style="height: 320px; width: 600px;">

沒有留言:

張貼留言