I'm trying to achieve this effect:
You see see a PNG-photo (in this case a woman), and a background-photo of a mountain. If I try a background-image for the PNG-file in CSS, it doesn't work. I don't want the text inside.
Related
I use Fancybox3 to display some images and I want to place a text on top of an image. This works when i edit the javascript file with this:
test
With this I have text on the actual image. But this text is big when Fancybox zooms the image in and out. Why is this happening and is there a way to solve this?
I want a simple image download text on the image instead of below the image.
You can use .fancybox-is-scaling class name to hide your text while image is zooming, similarly to this demo - https://codepen.io/fancyapps/pen/ePYNZo.
The script uses CSS transform: scale() for zooming to improve performance, but the side-effect is that everything scales withing the container.
I'm trying to animate the state of an element, by changing the svg background color.
To be more easy I try to interpolate an SCSS(Sass) variable #{$scss-variable} inside SVG.
Off course is not working, probabilly need some form of encoding before, so I'm looking for an scss function that can do this.
.span {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%
2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%
20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A#**#{$scss-variable}**%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M25
5.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%20
4.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c
3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
}
<span>aas</span>
I would Export the SVG via Illustrator after expanding it.
Here's an example of how to do that.
Once you create the SVG, you can then add it into your HTML by actually including the SVG element directly in the HTML or render it with an image tag (I usually put it directly into HTML).
The SVG is made up of vector shapes. These shapes are called either <circle>, <line>, <square>, or <paths>.
To change the color of the path, all you need to do is target it with CSS and change the fill property of the element. If you want to change the outside lining of the element you edit the stroke and stroke-width attributes.
If you want to animate the color changing, you can do this using keyframe animations as shown here.
I have a button on which I set the background image using css, and then sometimes need to change it dynamically in the code. But if I change it, I see both images, one on top of the other.
Here's my css:
ExpertVideoButton{
cn1-derive: Label;
background-image: url(images/play-video.png);
cn1-source-dpi: 180;
cn1-background-type: cn1-image-scaled-fit;
}
And my code:
mStateMachine.findViewVideoBtn(f).getAllStyles().setBgImage(mStateMachine.res.getImage("no_video.png"));
The previous background image doesn't get replaced by the new one. Any ideas on how to solve this?
Update
The original background image wasn't actually being set from the css - there was a css style that was unused, and the image was being set from the code, twice. The first time I had made it the Label's icon, and the second time its background image. Unfortunately, this was a case of me having trouble reading my own code!
Since you use transparent images you need to set the bgTransparency of the style to transparent (0) in the CSS (not sure how you do it there).
I have two images link.
Original image -
Masking image -
Here is the result image.
How can i get the result like this?
I was finding some way using css - clip-path : rect(....) but I can't find
using image mask.
Make sure that the mask is a .png, where the grey part is transparent. Then, use it in the following way:
CSS: img{background-image: url('original_image');}
HTML: <img src="mask.png"/>
See an example here: http://codepen.io/anon/pen/pjOwpe
You might want to use some of the CSS background properties to align the original image in such a way that the correct part of it is shown (see http://www.w3schools.com/cssref/pr_background-position.asp)
Hi i was going through a website where they used a very unique (according to me) background. they are mixing a color with an image and using it as background. the image is like
Then they are mixing some yellow color in it & it become like this
When i went through the code they were using something like this
background: #f6b93c url(bg1.png);
but it did not work for me!
Please help me out?
That is nothing but a short hand syntax
background: #f6b93c url(bg1.png);
So the above code simply means
background-color: #f6b93c;
background-image: url(bg1.png);
For more info on background short hand syntax
Demo
a png image with transparency and bg color will do the trick,
Otherwise if it is a jpeg,
the color will fill the rest of the part(for eg:in a div), the image wont cover.
what was happening with this background: #f6b93c url(bg1.png);
fill the color #f6b93c then on the top of that place the image, so it was a %0%(for eg.) transparent image, this will end up with a mixer of both
with latest CSS3 technology, it is possible to create texured background. Check this out: http://lea.verou.me/css3patterns/#
but it still limited on so many aspect. And browser support is also not so ready.
your best bet is using small texture image and make repeat to that background. you could get some nice ready to use texture image here:
http://subtlepatterns.com
The image bg1.png does not seem to be in baseurl. You should try relative url. eg. if you have image inside 'images' folder, "images/bg1.png" should work.