圈光暈效果的圖像

我想創建圖像周圍的光暈效果身邊，但我得到不必要的margin.Can一些人告訴我如何刪除it.Here是小提琴 - https://jsfiddle.net/q2gv5oka/，懸停圖像查看保證金。圈光暈效果的圖像

<div id="play"></div>

下面是我的CSS

#play { 
    background: url('http://i.imgur.com/L1lIMUb.png') center center no-repeat; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 70px; 
    height: 70px; 
    margin: -35px 0 0 -35px; 
    z-index: 10; 
} 

#play:hover{ 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 30px; 
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
box-shadow:   0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
}

來源

2016-03-02 Vishnu

你的高度和寬度#play設置爲70像素。將其設置爲圖片的寬度和高度，在這種情況下62px。

編輯：另外尼克COAD在評論中提到的，你的利潤率將現在可以設置爲-31px，而不是-35px。

#play { 
 
    background: url('http://i.imgur.com/L1lIMUb.png') center center no-repeat; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 62px; 
 
    height: 62px; 
 
    margin: -31px 0 0 -31px; 
 
    z-index: 10; 
 
} 
 

 
#play:hover{ 
 
    -webkit-border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    border-radius: 30px; 
 
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
 
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
 
box-shadow:   0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
 
}

<div id="play"></div>

來源

2016-03-02 05:52:02

也許值得一提的是，如果他仍然希望它爲中心，他也應該更改頁邊距（' -35px'現在應該是'-31px'）。 –

是，第一個答案是正確的，因爲你的圖像比你的尺寸更小，只需添加background-size:cover或background-size:contain，從而精確匹配。

#play { 
 
    background: url('http://i.imgur.com/L1lIMUb.png') center center no-repeat; 
 
    position: absolute; 
 
    background-size:cover; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 62px; 
 
    height: 62px; 
 
    margin: -35px 0 0 -35px; 
 
    z-index: 10; 
 
} 
 

 
#play:hover{ 
 
    -webkit-border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    border-radius: 30px; 
 
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
 
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
 
box-shadow:   0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
 
}

<div id="play"></div>

來源

2016-03-02 05:58:54 mmativ

你可以試試下面的代碼。背景大小設置爲100％。

HTML代碼

<div id="play"></div>

CSS代碼

#play { 
    background: url('http://i.imgur.com/L1lIMUb.png') center center no-repeat; 
    background-size:100%; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 70px; 
    height: 70px; 
    margin: -35px 0 0 -35px; 
    z-index: 10; 
} 

#play:hover{ 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 30px; 
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
box-shadow:   0px 0px 30px 0px rgba(0, 255, 0, 0.67); 

}

查看演示here

來源

2016-03-02 06:33:40 WisdmLabs

圈光暈效果的圖像

回答

相關問題