33

画像の例

私はHTMLでこのようなことをしようとしています。これは、ページの最上部にあるヘッダーです。チェッカーボード領域は透明でなければなりません。

15divのように使用せずにこれを行うための良い方法を考えることはできません。

4

5 に答える 5

16

将来のオプション

理想的なシナリオは、画像のない単一の要素を使用することです。

ブラウザのサポートは制限されていますが、このような状況ではマスキングやクリッピングが役立ちます。私がこの回答を最初に書いたときから、仕様（下記）が進歩しているように思われるので、それは励みになります。

実用的なアプローチ

今のところ、私は画像ベースのソリューションを使用します。複雑である必要はありません。

高密度ディスプレイがますます一般的になっているため（ほぼすべてのタブレット/スマートフォンおよび4K PCモニター）、ラスターグラフィックスを避けることをお勧めします。これを実現するために、SVGはほとんどの最新のブラウザーで機能し、PNGをフォールバックとして使用できます。

デモ

IE8+バージョンのソース

<div id="box">
    <div id="knockout"></div>
</div>

#box{ 
    position: relative; 
}

#knockout {
    background-image: url(http://i.stack.imgur.com/AXHM0.png);
    width: 105px;
    height: 180px;
    margin: 0 auto;    
}

#knockout:before{
    content: " ";
    position: absolute;
    left: -52px;
    width: 50%;
    height: 100px;
    background-color: #000;
}

#knockout:after{
    content: " ";
    position: absolute;
    right: -52px;
    width: 50%;
    height: 100px;
    background-color: #000;
}

画像

これがあなたが始めるための透明なPNGです。基本的なAdobeIllustratorのスキルを持っている人は、これをSVG画像として再作成し、前述の高解像度機能を提供することができます。SVGは背景画像としてうまく機能します。

ここに画像の説明を入力してください

于 2013-02-05T21:45:30.730 に答える
7

CSS-alphaマスクで可能かもしれません：https ：//caniuse.com/#feat=css-masks

アップデート1

  • DIV上にレイヤーを作成する
  • CANVAS-elementを挿入します。黒い部分を黒く塗り、残りは透明にする必要があります。

アップデート2

古いブラウザではアルファレイヤー付きのPNG画像を使用せずにこのレイアウトを作成する方法はないと確信しています。

于 2013-02-05T21:46:24.987 に答える
6

編集：@yentupsがフィドルを再び投稿した助けを借りて私のデモを拡張しました。

放射状のグラデーションで少し遊んで、次のことを思いつきました。少し遊んで、放射状グラデーションの構文に慣れる必要があります。今は遅いです、今は頭を包みません。幸運を！

デモ： http： //jsfiddle.net/5VDLX/

HTML：

<div class="container">
    <div class="shape"></div>
    <div class="circle"></div>
</div>

CSS：

body{
    background: yellow;
}
.shape {
    width: 500px;
    height: 75px;
    background-color: transparent;
    background-image: -webkit-radial-gradient(50% 100%, circle, transparent 50px, black 0);
    background-image: radial-gradient(50% 100%, circle, transparent 50px, black 0);
}
.circle {
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 2px solid red; /* red for demonstration */
    border-radius: 50px;
    margin: -51px 0 0 199px; /* considering borders */
}
于 2013-02-05T22:18:16.637 に答える
4

kleinfreundのコードを使用する：
このデモ

完全に機能するページの例：ここ

于 2013-02-05T22:30:43.470 に答える
-1 
**Demo Working Link** - https://codepen.io/iamabhishek/pen/ddoomE

**HTML**
<div class="main">
  <div></div>
</div>

**css**
div.main{
    width:50%;
    height:550px;
    background: url('https://images.unsplash.com/photo-1503135935062-b7d1f5a0690f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
    background-position:center;
    background-size:cover
}
div.main>div{
    width:100px;
    height:320px;
    background:transparent;
    background-attachment:fixed;
    border-top:25px solid orange;
    border-left:120px solid orange;
    border-bottom:25px solid orange;
    border-right:10px solid orange;
    margin-left:150px

}
于 2018-01-31T07:26:10.207 に答える