How to change the url of the picture in css?-CodePudding

The picture is here I have this assignment here, and it tells me that I have to make the end of the url like this. How can I change the url name if I choose a picture from a website.

CodePudding user response：

src attribute is used to embed an image on a webpage. It could be either a url or a file path.

<img src="https://i.stack.imgur.com/umGnM.png"/>

CodePudding user response：

If you wants to achieve it with css, do it like this.

.btn {
    display: block;
    width: 80px;
    height: 80px;
    background: url(https://i.stack.imgur.com/umGnM.png) no-repeat;
    background-size: contain;
    text-align: center;
    color: #fff;
    text-decoration: none;
}
.btn:hover {
    background: url(https://i.stack.imgur.com/umGnM.png) no-repeat;
    background-size: contain;
}

CodePudding user response：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Image Swap on Hover with CSS</title>
    <style>
     .card {
    width: 130px;
    height: 195px;
    position: relative;
    display: inline-block;
}
.card .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}
.card:hover .img-top {
    display: inline;
}
</style>
</head>
<body>
<div >
    <img src="images/card-back.jpg" alt="Card Back">
    <img src="images/card-front.jpg"  alt="Card Front">
</div>
</body>
</html>

you can use this code for show image, this is better for SEO

good luck.

CodePudding user response：

Use the full address e.g.

https://example.com/somepicture.jpg

instead of the .../images.header.jpg