Transparent src so that background shows through - javascript

Do you know how to make the source image of an img tag transparent so that one can see the background image through the src image?
Say I have this html:
<img src="my_image.jpg" height="200" width="300" style="background:url(img/bg.jpg) repeat;" />
I want to somehow target the source image and set the opacity to i.ex. 0.7 .
With jQuery I could copy the src, height and width of the image and manipulate the markup into something like this:
<div style="background:url(img/bg/jpg) repeat; height:200px; width:300px;">
<div style="background:url(my_image.jpg); height:200px; width:300px; opacity:0.7;"></div>
</div>
But does anyone have a better/simpler suggestion for how to do make this happen? Preferrably without manipulating the markup.

I don't think you can do this with just an <img/>. Try:
<div class="image-wrapper">
<img src="my_image.jpg" height="200" width="300"/>
</div>
.image-wrapper {
display: inline-block;
background: url(img/bg.jpg) repeat;
}
.image-wrapper img {
vertical-align: top;
opacity: 0.7;
}
and a fiddle.

You could try wrapping the image in a <span></span> and setting the background on that, then reducing the transparency of the image. It'd be less awkward than replacing the image with divs.

You could have the image in a div instead of a background, then change the z-index, then you could target it directly in the css.

Why not just make the image partially transparent in an editor, then save as PNG (since JPG doesn't support transparency)? That'd be a lot easier than trying to code a solution.

Related

I want to put width and height directly in the style tag using quill-image-resize-module in vue2-editor

I implemented resize in image using quill-image-resize-module in vue2-editor, but now the width attribute is added to img and I want to copy it to the style attribute.
In the implementation of what I made, the img tag is css with width: calc (100% + 32px);
Because there is a translation and this cannot be corrected, I would like to be able to display something smaller or larger than the specified one by putting the size in the image with style.
It is like this in the current situation.
<img alt src="https://**********" width="100px">
I want to change it like this.
<img alt src="https://**********" style="width:100px">
Try to move the style tag to your css:
.img {
width: 100px !important;
}
or if you use other img tags which should not be adjusted:
Your css:
#yourChoosenId {
width: 100px !important;
}
Your html:
<img alt src="https://**********" id="yourChoosenId">

Is using a SVG more efficient than a PNG as a lazyload placeholder?

I am using lazysizes lazyloading library, and I'm trying to decide on the most performance-optimal lazyload placeholder technique.
If the size is similar (for simplicity's sake; unlikely, as SVG is usually way smaller) would it be more optimal for performance to use SVG or PNG?
My HTML structure is like this:
<div class="image-module aspect-ratio--4x5">
<img class="lazyload" data-src="..." src="..." data-srcset="..." srcset="...">
<svg viewBox="0 0 204.7 255.3" width="100%" height="100%">
<use xlink:href="#idRef" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</div>
*"image-module" class container is just for aspect ratio
Related Questions:
I am guessing, regardless of whether SVG or PNG, I shouldn't be using them as inline element but as CSS background. Is my guess correct and will this improve performance?
Is there some tool to measure the performance of paint/render differences like this?
I think the best, most performance-optimal method is to use an SVG as a CSS background-image. However, while lazyloading the <img> is opacity: 0;, so I can't use background-image on the main img. What I plan to do is use background-image on the parent, image-module classed parent, and then to target it on-load with JS. Like so:
var $allImageModules = $('.image-module img');
$allImageModules.on('load', function(){
setTimeout(function(){
$(this).parent().find('svg').remove();
}, 537);
});
Is there some magical CSS way that I am not aware of to target the parent, depending on whether the class of its child image is "lazyload," "lazyloading," or "lazyloaded" class? PS: I know .find('svg').remove() doesn't work.
Once the image is loaded, does it help performance to replace the no-longer visible background image with background-image: none; like below?
.image-module.lazyload,
.image-module.lazyloading,
.image-module.lazyloaded {
background-image: url("data:image/svg+xml;utf8,<svg ... </svg>");
background-position: center;
background-size: 30%;
background-repeat: no-repeat;
}
.image-module.lazyloaded {
background-image: none;
}

stretch image to fit div using jquery css method

This is the generated html
<div id="largephoto" style="background-image: url(http://somepath/images/sample.jpg);">
and here is my js call
$('#loader').css('background-image','url("images/sample/gif" )');
I want the image to be like in facebook, regard too small or too large the user uploaded photo, the frame should show the center of the photo and leave no white space within the frame.
I tried $('#largephoto').css('background-image-position','center');
but it seem do nothing
Use css background-size property for fixing the image in DIV
$('#largephoto').css('background-size','100%,100%');
Try this CSS :-
.img_class {
max-width: 100%;
}
This will adjust image sucha a way that image will be cover its container.
#largephoto {
background-size:cover;
}

image map alternative (maybe in javascript?)

Alright, so I was wondering if there was an alternative, lightweight way to creating an image map.
Basically, I want to take this image:
And have the sections of the diagram light up when they are hovered over, kinda like this (I've mocked it up in photoshop):
The other sections (which I haven't named yet) should be able to do the same. Also, I'd like to be able to use javascript later to have sliding links appear from behind those sections (I roughly know how to do that now, so I'm okay that)
Does anyone have any suggestions? Just a general direction on what to search for would be great.
Map tag would be good and it is not actually heavyweight as it does not require any external plug-ins.
However, since you just want a general idea: Once due to some error, I wasn't able to use map tag. So I split the original image into different images (positioned them as the original image was) and then used events on separate parts.
Tiresome, but a workaround.
Circles are easy to do with CSS. You can start with something like this :
width: 140px;
height: 140px;
background: rgba(255, 0, 0, 0.3);
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
FIDDLE
Hope it help.
It's difficult for me to achieve that white shape in the middle, but here's a simple try:
http://jsfiddle.net/w8zTz/
Only with three div and a few css:
HTML
<div class="rojo"></div>
<div class="azul"></div>
<div class="amar"></div>
CSS
div {width:100px; height:100px; border-radius:100px; position:absolute; opacity:0.5;}
.rojo {background:red; top:0; left:30px;}
.azul {background:cornflowerblue; top:60px; left:0;}
.amar {background:gold; top:60px; left:70px;}
div:hover {opacity:1; z-index:-1}
(Z-index is for stack the div behind the other and reach transparency).
Hope this helps :)
Take two images
1)normal image
2)the particular section higligthed when hovered image
<img id="originalimage" src="originalimage.png" width="140" height="140" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="77,18,127,90" href="#" onmouseover="onHover('higlightedimageonhover-imagesrc.png')" onmouseout="onout6('originalimagesrc.png')"/>
</map>
<script>
function onHover6(image1)
{
document.getElementById('originalimage').src=image1;
}
function onout6(image2)
{
document.getElementById('originalimage').src=image2;
}
</script>
Here when you hover on the co-ordinates, the image changes to hoverimages and on mouseout it changes to original image.

jquery mobile, images have a small black border around them

I'm using jquery mobile, and I have a image that I would like to fit the screen from right to left, with no gaps. However, if I just put the image without doing anything to it like <img src="image.png />", it turns out with a small black border around it. This stays despite me setting width=100% in the css. How can I remove this border?
Adding some code:
<div data-role="content" style="background-color: #000000">
<div id="slogandiv">
<img src="slogan.jpg" id="slogan" width="100%" height="45%"/>
</div>
I just did this. It is because that the data-role = "content" has a automated padding of 15px.
I went into the .css file and removed this. search for ui-content. remember in the ui-content, listview, that it has -15 so change this to 0 aswell.
A CSS directive of width: 100% for your image simply means that the browser should display the image at its actual size (if it can), it won't stretch it to some other size. This may explain why you have a slight border around it, as the image doesn't quite scale to the full width of the viewport. You could try tinkering with the img tag's margin and padding settings, but I suspect the approach that will work best for you is to display the image a different way.
Have you tried manipulating the CSS of the containing element? Say you have a paragraph class called .container. You could do something like this:
.container {
background: url('image.png') no-repeat;
background-size: contain;
width: 480px;
height: 240px
}
… this will use your image as before, but this time the background-size attribute of contain will force it to fill the dimensions of the parent element (the height and width of which we have defined above).
background-size is new in CSS3 and therefore not uniformly-supported, but it's in WebKit and several other browsers. Read more: A List Apart: Supersize that Background, Please!

Categories