エラーメッセージの一部である画像を使用しています。私は一つの細部を除いてすべてを作り出しました。エラーメッセージの背景の一部である右上隅のアイコン。私は前にこのようなことは一度もしていないし、レスポンシブルデザインで作業している。右上の背景としてのアイコン
私はこれまでのところ、私が持っているコードでフィドルを作成していると私は後でXが押されたときに、メッセージボックスの近くを作るためにJavaScriptを追加します。
JSFiddle：私が働いていますhttps://jsfiddle.net/kLw6a8zr/
画像をFrom：
.net-content classwith次のコードを置き換え
.n-content {
width:100%;
min-height:120px;
background-color:#d45659;
box-shadow:0 0 15px 1px rgba(0, 0, 0, 0.4);
box-sizing:border-box;
overflow:hidden;
background-image: url(http://i1167.photobucket.com/albums/q627/deskdecode/alert-min_zpsz7khasfs.png);
background-position: 95% -50%;
background-repeat: no-repeat;
background-size: 160px;
}
私は、これはあなただけのクラスに変更するのに役立ちます願っています。このスニペットを試してみてくださいn型のラッパー。
.n-wrapper {
width:60%;
padding:20px;
margin:0px auto;
top : 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
}
* {padding:0; margin:0;}
body {
background-color:#423a4a;
}
.n-wrapper {
\t width:60%;
\t padding:20px;
margin:0px auto;
top : 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
}
.n-content {
\t width:100%;
\t min-height:120px;
\t background-color:#d45659;
\t box-shadow:0 0 15px 1px rgba(0, 0, 0, 0.4);
\t box-sizing:border-box;
\t overflow:hidden;
}
.n-h1 {
\t color:#fff;
\t font-size:22px;
\t border-bottom:1px solid #c04c4f;
\t padding:5px 25px;
}
.n-p {
\t color:#fff;
\t font-size:18px;
\t border-top:1px solid #ff686c;
\t padding:30px;
}
.n-button {
\t width:100%;
\t background-color:#fff;
\t text-align:right;
\t padding:20px;
}
.n-button-white {
\t color:#fff;
\t outline:none;
\t background-color:#bfbfbf;
\t border:1px solid #a9a9a9;
\t border-radius:4px;
\t width:20%;
\t min-width:120px;
\t margin-right:20px;
\t padding:10px;
}
.n-button-red {
\t color:#fff;
\t background-color:#d45659;
\t outline:none;
\t border:1px solid #c04c4f;
\t border-radius:4px;
\t width:20%;
\t min-width:120px;
\t margin-right:40px;
\t padding:10px;
}
.n-close {
\t font-weight:500;
\t color:#fff;
\t text-align:right;
\t padding:15px 15px 0px 0px;
}
.n-close:hover {
\t cursor:pointer;
\t color:#f8f4ff;
\t
}<div class="n-wrapper">
\t <div class="n-content">
\t \t <div class="n-close">X</div>
\t \t <h1 class="n-h1">Headline</h1>
\t \t
\t \t <p class="n-p">
\t \t \t some text
\t \t </p>
\t \t <div class="n-button">
\t \t \t <button class="n-button-white">Dicline</button>
\t \t \t <button class="n-button-red">Accept</button>
\t \t </div>
\t </div>
</div>これはあなたのアイデアを与えるかもしれない：
を* {padding:0; margin:0;}
body {
background-color:#423a4a;
}
.cross-img{
position: absolute;
width: 100px;
height: 100px;
z-index: 2;
right: 10px;
top: -30px;
opacity: 0.3;
}
.cross-img img{
width: 100%;
height: 100%;
background-color : transparent;
}
.n-wrapper {
\t width:60%;
\t padding:20px;
}
.n-content {
position: relative;
\t width:100%;
\t min-height:120px;
\t background-color:#d45659;
\t box-shadow:0 0 15px 1px rgba(0, 0, 0, 0.4);
\t box-sizing:border-box;
\t overflow:hidden;
}
.n-h1 {
\t color:#fff;
\t font-size:22px;
\t border-bottom:1px solid #c04c4f;
\t padding:5px 25px;
}
.n-p {
\t color:#fff;
\t font-size:18px;
\t border-top:1px solid #ff686c;
\t padding:30px;
}
.n-button {
\t width:100%;
\t background-color:#fff;
\t text-align:right;
\t padding:20px;
}
.n-button-white {
\t color:#fff;
\t outline:none;
\t background-color:#bfbfbf;
\t border:1px solid #a9a9a9;
\t border-radius:4px;
\t width:20%;
\t min-width:120px;
\t margin-right:20px;
\t padding:10px;
}
.n-button-red {
\t color:#fff;
\t background-color:#d45659;
\t outline:none;
\t border:1px solid #c04c4f;
\t border-radius:4px;
\t width:20%;
\t min-width:120px;
\t margin-right:40px;
\t padding:10px;
}
.n-close {
z-index: 50
\t font-weight:500;
\t color:#fff;
\t text-align:right;
\t padding:15px 15px 0px 0px;
}
.n-close:hover {
\t cursor:pointer;
\t color:#f8f4ff;
\t
}<div class="n-wrapper">
\t <div class="n-content">
<div class="cross-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUYyXH9xufRPuLvuln6MiroZuUJ9rlTaqaJ2mOo0kgEths4JxL">
</div>
\t \t <div class="n-close">X</div>
\t \t <h1 class="n-h1">Headline</h1>
\t \t
\t \t <p class="n-p">
\t \t \t some text
\t \t </p>
\t \t <div class="n-button">
\t \t \t <button class="n-button-white">Dicline</button>
\t \t \t <button class="n-button-red">Accept</button>
\t \t </div>
\t </div>
</div>ます。また、このように使用CAL。 .net-content次のコードのクラス。
.n-content {
width:100%;
min-height:120px;
background: #d45659 url(top-right.png) no-repeat top right;
box-shadow:0 0 15px 1px rgba(0, 0, 0, 0.4);
box-sizing:border-box;
overflow:hidden;
}
「バックグラウンドの一部」とは何ですか？ –
アイコンをクリックすると元の画像を見ると右上のアイコンが表示されます。実際の大きなアイコン@O_Z –
は画像@martinj – mrid