0

dribbble.com にあるスクリーンショットに似たスクリーンショット クラスがあり、その上にカーソルを合わせるとリンク アイコンが表示されます。背景画像（リンクアイコン）が同じサイズのままで、残りを縮小すると非常に大きく見える部分までレスポンシブにしました。

ブラウザを縮小したときに、リンク アイコン クラスの背景イメージも縮小されるようにするにはどうすればよいですか?

.screenshot .link-icon {
    background: url("../img/icons/link.png") #fff no-repeat 50% 50%;
    position: absolute;
    padding: 8.02139037433155%;
    border-radius: 100%;
    position: absolute;
    z-index: 1;
    top: 39%;
    left: 42.25352112676056%;
}

そのため、背景の URL 画像をレスポンシブにする必要があります。私はそれを正しく言ったことを願っていますか？

4

1 に答える 1

1

そのために高さを定義する必要があります。

.screenshot .link-icon {
    background: url("../img/icons/link.png") #fff no-repeat 50% 50%;
    position: absolute;
    padding: 8.02139037433155%;
    border-radius: 100%;
    position: absolute;
    z-index: 1;
    top: 39%;
    left: 42.25352112676056%;
    height: 1em;
}
于 2013-09-06T10:32:27.067 に答える