How do I change url in CSS to local resources?

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?

Hi @chuxinhao,

You will have to change the style of an element using Javascript and get the url from an asset image, example code:

this.div = document.getElementById('myID');
var url = myAsset.getFileUrl();
this.div.style.backgroundImage = 'url("'+url+'")';

getFileUrl is a pc.Asset method, in the docs:

https://developer.playcanvas.com/en/api/pc.Asset.html#getFileUrl

2 Likes

Thank you,

1 Like