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;">
沒有留言:
張貼留言