HTML:
<div class='Closebutton'></div>
<div class='titleText'>
<span class='counter'>this is Title</span>
</div>
<div class='showURL'>
<iframe id="Myiframe" src="https://www.csdn.net/"width="100%"height="100%"frameborder="0"name="iframe名称"scrolling="auto">
</div>
CSS
.container {
position: absolute;
left: 50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width:70%;
background-color: #222;
/* color: #fff; */
font-weight: 100;
padding: 8px;
box-shadow: 0 0 16px rgba(0, 0, 0, .3);
}
.container > .Closebutton {
background-image: url("http://cdn1.zhizhucms.com/materials/869060/origin/68b0d40a0f441609547ddfdc5d2e197b_origin.png");
background-size: 100%;/*按比例缩放*/
width:50px;
height:50px;
float: right;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* display: inline-block;
background-color: #07f;
padding: 0 16px;
font-size: 18px;
line-height: 32px;
border-radius: 4px; */
}
.container > .counterBox {
float: right;
}
.container > .titleText {
position: absolute;
left: 50%;
top:5%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.container>.titleText .counter {
color: #ff0;
font-size: 24px;
}
.container > .showURL {
margin-top: 52px;
height: 600px;
width: 100%;
}
.container > .iframe {
height: 100%;
width: 100%;
}
How to set the Closebutton background-image: URL to resources in the project?