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://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;">

沒有留言:

張貼留言