Is it possible to set the equivalent of a src attribute of an img tag in CSS?

后端未结

关注

 25  2147

借酒劲吻你

Is it possible to set the src attribute value in CSS? At present, what I am doing is:

相关标签:

25条回答

萌比男神i

2020-11-22 10:09
To reiterate a prior solution and to stress the pure CSS implementation here is my answer.

A Pure CSS solution is needed in cases where you are sourcing content from another site, and thus you have no control over the HTML that is delivered. In my case I am trying to remove branding of licensed source content so that the licencee does not have to advertise for the company they are buying the content from. Therefore, I'm removing their logo while keeping everything else. I should note that this is within my client's contract to do so.
```
{ /* image size is 204x30 */
     width:0;
     height:0;
     padding-left:102px;
     padding-right:102px;
     padding-top:15px;
     padding-bottom:15px;
     background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
没有蜡笔的小新

2020-11-22 10:10

You can define 2 images in your HTML code and use display: none; to decide which one will be visible.

0 讨论(0)
发布评论:

提交评论
- 加载中...
无人共我

2020-11-22 10:11
Use content:url("image.jpg").

Full working solution (Live Demo):
```
<!doctype html>

<style>
.MyClass123{
	content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>
```
Tested and working:
- Chrome 14.0.835.163
- Safari 4.0.5
- Opera 10.6
Tested and Not working:
- FireFox 40.0.2 (observing Developer Network Tools, you can see that the URL loads, but the image is not displayed)
- Internet Explorer 11.0.9600.17905 (URL never loads)
0 讨论(0)
发布评论:

提交评论
- 加载中...

失恋的感觉

2020-11-22 10:15

i used the empty div solution, with this CSS:

#throbber {
    background-image: url(/Content/pictures/ajax-loader.gif);
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

HTML:

<div id="throbber"></div>

0 讨论(0)

予麋鹿

2020-11-22 10:15

HTMl Code:

<!DOCTYPE html>
<html>
     <head>
         <link type="text/css" rel="stylesheet" href="css destination" />
     </head>
     <body>
<!-- click-able pic with link -->
           <a href="site you want"> 
<!-- Take the off if you don't want click-able link -->
                <h1 id(or class)="nameOfClassorid">
                     <span>Text that is not important</span>
                </h1>
           </a>
      </body>
 </html>

Css Code:

span {
     display: none;
}
h1 id or class {
     height: of pic;
     width: of pic;
/* Only flaw (so far) read bottom */
     background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
     background-image:url(/* 'new background!!!' */);
}

I've been studying html after school for a few days, and wanted to know how to do this. Found out the background and then put 2 and 2 together. This works 100% I checked, if not make sure you fill in necessary things!!! We need to specify height, because without it there would be nothing!!! I'll leave this basic shell you can add-on.

Example:

 <!DOCTYPE html>
 <html>
     <head>
         <link type="text/css" rel="stylesheet" href="style.css" />
     </head>
     <body>
           <a href="http:localhost"> 
                <h1>
                     <span>Text that is not important</span>
                </h1>
           </a>
     </body>
 </html>
span {
     display: none;
}
h1 {
     height: 100px;
     width: 100px;
     background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/Ubuntu-Desktop-@-2011-01-11-191526-300x225.png");
}

h1:hover {
     height: 300px;
     width: 300px;
     background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}

P.S. Yes I am a Linux user ;)

0 讨论(0)

终归单人心

2020-11-22 10:16

As far as I am aware of, YOU CANNOT. CSS is about style and image's src is content.

0 讨论(0)
发布评论:

提交评论
- 加载中...