window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

div background

DIV 內置入 jpg 圖片

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

<style type="text/css">
.a17524{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMa3fbcschI2vxmf4RGwxdn3jfM2N56-Ik46Oh3xFBQ-S0JHRjJvojLfpjKu2dVCmpHmg2Hjk2KEK-4-iQReohtaHv3sL_O2YMX1sGQdEvFlXU4I3RicLmJJ1Ub2Pi1pZ3jY2U3HpCMql/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;">

沒有留言:

張貼留言