I'm trying to use the mask-image property to put a texture over text... It works when I view it on other people's sites but when I try to view it on a demo site I made it doesn't work...
Here is my full code: (I don't own the image being used)
<!doctype html>
<html>
<head>
<h1 style="-webkit-mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg);
-o-mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg);
-moz-mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg);
mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg);
font-size:120px;">
test
</h1>
</head>
<body>
</body>
</html>
Based on the example image I'll go out on a limb here and assume that what you really want is this (example for webkit):
h1 {
font-size: 120px;
background: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg) repeat 0 0, white;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
http://jsfiddle.net/ZdvXg/
A mask makes only sense if you're having an transparent area within your image:
http://jsfiddle.net/ZdvXg/1/
Related
I am trying to make a CSS sheet inside an HTML document to change the background
image of a link.
You can make CSS make it so if you have your mouse go over something it can like change its color
<!DOCTYPE html>
<html>
<head>
<style>
#a1:link, #a1:visited {
background-color:red;
padding: 15px 25px;
text-decoration: none;
}
#a1:hover, #a1:active {
background-color:green;
}
</style>
</head>
<body>
<a id="a1" href="home.html">
</a>
</body>
</html>
Is there a way to instead doing a color can you do an image?
I have tried
background-image:url('locationtoimage.jpg')
and it just makes the link disappear. I did change both
background colors to background-image and I did the proper format and things but it wont work? I have tried googling it but everyone just asks for like buttons to things but I am dealing with links.
Sorry if this was already answered somewhere else. I tried looking but I cant find anything. I am really sure that this is possible and simple and I might just be over looking something. Here is what I have.
<!DOCTYPE html>
<html>
<head>
<style>
#a1:link, #a1:visited {
background-image:url('media.jpg');
padding: 15px 25px;
text-decoration: none;
}
#a1:hover, #a1:active {
background-image:url('home.jpg');
}
</style>
</head>
<body>
<a id="a1" href="home.html">
</a>
</body>
</html>
this works though
<!DOCTYPE html>
<html>
<head>
<style>
#a1 {
width: 200px;
height: 200px;
}
#a1:link, #a1:visited {
background-image:url('imageatasite');
padding: 15px 25px;
text-decoration: none;
}
#a1:hover, #a1:active {
background-image:url('imageatasite');
}
</style>
</head>
<body>
<a id="a1" href="home.html">
</a>
</body>
</html>
but I am not using an image online im using one that is in my html folder
but it wont work?
Try googling an image and pasting that in the background image url to see if it's defientley not the file.
Failing that I would suggest to use a separate div wrapper to wrap the images. And on :hover use display none to hide the image you don't want to see on hover.
Then you can set the image to be 100% that of the div.
Check the file extension too just to be sure.
I dont fully understand what the problem is but other images do work. The images I wanted to use were the same file extension in the same folder but I took a snapshot of them and now they work just fine. Thank you for helping guys I think all is well now.
I have been scratchingmy head about why the background image function is not working for me. Any suggestions? Yes I already know that Im a dumbass with severe attention problems..
<head>
<style type="text/css">
<!-- As you can see below, i tried to include a header image in 3 different ways -->
header {height:200px; background-url:(http://i.imgur.com/HtAvI.jpg) ; }
#header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; background:url(http://i.imgur.com/HtAvI.jpg) no-repeat; height:400px; }
#header{background image: url(http://i.imgur.com/HtAvI.jpg);}
<!-- i tried including it in the body as well, to no avail -->
body { background image: url(http://i.imgur.com/HtAvI.jpg) ; }
p {color: red}
</style>
</head>
<body>
<p>this is text</p>
</body>"
Change background image: to background-image:. Also there is no property like background-url
There is no background-url. There is no background<space>image. There is background-image and there is background.
Once you fix those problems the images should display correctly.
RGBA -- workaround for IE is “DXImageTransform.Microsoft.gradient".Found a handy tool provided by www.css3please.com for cross browser transparency,but applying this gradient on IE(IE8) -- works,but the text loses its clearness/legibility.
applying georgia to make the font look uniform on all the browsers,but the text does not appear properly after i apply gradient . Here's the JSFiddle http://jsfiddle.net/mvivekc/GJaDy
the code is--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<html>
<style type="text/css">
.georgiaWithTransform{
font-family: Georgia;
height: 80px;
width: 800px;
font-family: "Georgia", Geneva ;
word-wrap:break-word;
background-color: rgba(150, 150, 150, 0.3); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C969696,endColorstr=#4C969696); /* IE6–IE9 */
zoom: 1;
}
.georgiaWithoutTransform{
font-family: Georgia;
margin-top: 30px;
height: 80px;
width: 800px;
font-family: "Georgia", Geneva ;
word-wrap:break-word;
background-color: rgba(150, 150, 150, 0.3); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
}
</style>
<body>
<div class="georgiaWithTransform">Georgia does not appear properly with transformation in IE 8,and i do not understand why this is happening</div>
<div class="georgiaWithoutTransform">Georgia properly without transformation in IE 8,You can notice the difference in the appearance of the text here as compared to the top part( Noticeable only in IE)</div>
</body>
</html>
Cant understand why this is happening and badly need a workaround for this problem.
Here's a screen shot of the problem on IE8 --
Same happens on the fiddle as well.. problem is seen only on IE,not sure why..
Please help,
Thanks in advance
I had a similar problem once with opacity filters in IE, the alternative that was suggested to me was using 2x2 image and background-repeat. In your case, you could try the same with a 1px width and the content height as height for your image with the desired gradient applied. This may not help you much but, here is the link to aforementioned question.
P.S : using an image as a workaround did work like a charm for me.
IE Filter Antialiasing problem
Alright, that's what I thought was happening. The filter's turning off the anti-aliasing in the font. You can see a solution offered here. Biziclop created a small jQuery script you can use and has a sample of it working here. This will force the browser to fake the anti-aliasing.
Can someone else take a look at this code and either confirm that this is an IE9 bug or tell me what I am doing wrong? With the following HTML code. The bottom border of the button will render the same color as the text even though a border color of red is defined. IE8 and every other browser on the planet renders this OK. Make sure that IE9 is rendering in standards mode.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
button.button {
color: blue;
border: 0px;
border-bottom: #FF0000 2px solid;
}
</style>
</head>
<body>
<button type="button" class="button">Update</button>
</body>
</html>
So far the only fix I've found for this is to redeclare a border color for all sides at the bottom of the style.
border-color: #FF0000;
dont know it if helps checked it out its fine for me
use this
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
button {
border:0;
}
.update {
color: blue;
border-bottom: 2px #FF0000 solid;
display: block;
outline:none;
}
</style>
</head>
<body>
<button type="button" class="update">Update</button>
</body>
</html>
and if you accept my opinion, dont use tag names as class name
Need a div to partially show the image behind it, is this even possible? Tried:
opacity:.5;
AND
filter:alpha(opacity=50);
Both produce a solid div.
Any help would be much appreciated.
From a wondrous pure guess in a comment, I managed to find a working answer:
Did you try using a semi-transparent
.png?
Yay!
Right you are, thirtydot! You gotta toss a thumbs-up for cfdocument, eh?
I've confirmed this works in CF9. I do wonder whether this example is backward compatible.
Can anyone confirm other ColdFusion versions support this?
<cfdocument format="PDF" pagetype="letter"
margintop="0.5" marginbottom="0.5"
marginleft="0.5" marginright="0.5">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body { background-image: url( "images/use_your_image.jpg" ); }
img { border: 3px solid #990000; }
</style>
</head>
<body>
Does transparent image appear above the background repeated image?
<img src="images/red_transparent_100x100.png">
<!--- Generated this at http://transparent-png-generator.com/ --->
</body>
</html>
</cfdocument>