web-dev-qa-db-ja.com

background-sizeでdivの背景画像をズームするにはどうすればよいですか

Cssで背景画像を作成し、33％幅のdiv要素を引き伸ばしたい

background-image:url(); background-size:cover

Mouseoverまたはmouseneterでdivの背景画像のズームインをアニメーション化するにはどうすればよいですか？これを実行できるプラグインはありますか？背景divは伸縮性のあるページであるため、background-size：coverを使用する必要があります。

私はまだフィドルを持っていませんcos私はどこで、どのように始めるべきかわかりません

javascriptjquerycsscss3background-image
27
ONYX

CSS遷移ズームをハックしてbackground-sizeに適用したい人への回答：cover;

-そうでない場合、そのような効果を達成する標準的な方法については、2番目のセクションを読んでください

<div class="wrap">
    <div></div>
    <p>hello</p>
</div>


html, body {
    height: 100%;
}

div.wrap {
    height: 33%;
    width: 33%;
    overflow: hidden;
    position: relative;
}

div.wrap > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}

div.wrap:hover > div {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);    
}

Demo（background-size: cover;を使用して要素を遷移/ズームする）

coverサイズの移行が必要であると言ったので、前に言ったトリックを思いつきました。ここでは、子要素を持つposition: relative;要素の下に子要素がネストされていますposition: absolute;をbackground-imageに設定し、background-sizeをcoverに設定してから、親のhoverで、transform: scale(2,2);プロパティを使用して要素を拡大します。

また、このソリューションを使用する際の重要なことは、z-index要素のposition: absolute;を、内部に配置する要素よりも低く設定する必要があるため、background

HTMLとCSSを使いこなしたい人への回答

値がcoverの場合、background-sizeをアニメーション化できないため、pxまたは%が必要になります。または、imgタグを使用することもできますtransform: scale(2,2);プロパティ付き。

デモ

デモ2（中心からズームインまたはズームアウト）

div {
    height: 200px;
    width: 200px;
    background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
    background-size: 100% 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

div:hover {
    background-size: 150% 150%;
}

background-size: cover;に固執する場合は、要素全体をoverflow: hidden;で固定寸法のラッパー要素にラップし、親要​​素のhoverで子要素をスケーリングする必要があります。

コメントしたように、imgタグの例では、transform: scale(2,2);を使用して、overflow: hidden;に設定された親要素でそれを実現できます。

デモ2

div {
    height:300px;
    width: 300px;
    overflow: hidden;
}

div img {
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
}

div:hover img {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);
}
55
Mr. Alien