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>
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'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/
In my main CSS file, I have my a:link selector set to display links in White.
a:link{
color: white;
}
However, I want links in another DIV (.menuItem) to be black.
I am trying
.menuItem a:link{
color: black;
}
can't seem to get it to work, so it's probably wrong..
Can anyone lend a hand on this one?
.menuItem a:link{
color: black !important;
}
With respect to Chacha102, I don't think the solution is ideal. !important is a kludge, and a better way to handle this would be to make use of the document structure to add some specificity. Assuming your .menuItem elements have a common parent, perhaps a div with an id of menu, you could revise your menu-specific link style as follows:
#menu a:link {
color: black;
}
The extra specificity should cause the more specific rule to take effect for those menu items.
Working on a sample code now. But Is your div tag having an Id of menuItem or a class of menuItem? This is my guess.
Edited : Okay, now I see. If you separate the css to another file and use a link tag to import it in, then it should be fine without using the !important command, see this :
body {background-color : green;}
a:link{ color : white;}
.menuItem a:link
{
color : black;
}
And this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test page</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div>
This is a link
</div>
<div class="menuItem">
This is a link in div menuItem
</div>
</body>
</html>
Hope this helps:)
Still, if I embed the css snippet into the html, then it doesn't work... Wondering why?
You can save the code below and try it out.
In firefox,it's full browser grey,but in IE(IE7 to be exact),it's not working.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style text="text/css">
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background-color:grey;
}
</style>
</head>
<body style="font-size:62.5%;">
<div class="overlay"></div>
</body>
</html>
IE doesn't recognize the CSS color name grey. Try using a hex color, e.g., #ccc, and it will work. Alternatively, using gray (with an 'a', not an 'e') also works.
Note that this is standards-compliant, because W3C doesn't say anything about supporting alternate spellings of gray, and gray is indeed the color name according to the spec for CSS3.
Try adding this to your style defs:
html, body {
height: 100%;
}
On IE, body doesn't extend the full height of the viewport by default, and your overlay's container is body, so...
Edit Just tried it, and yours worked without the above, must be because body is statically positioned. Anyway, John Feminella figured it out; see his answer.
In this case, internet explorer doesn't seem to give the right amount of margin. It looks like it measures the margin from the top of the box and ignores the padding. Why is this? Is there a good workaround? Here's an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.messagebox
{
border: solid 2px black;
background: blue;
color: white;
padding: 10px; /* Problem only when padding set */
}
h1, h2, h3, h4
{
margin-top: 12px;
}
</style>
</head>
<body>
<div class="messagebox" style="width: 300px">
<h4 style="text-align: center">In IE, this text is 10px higher than in FF.</h4>
</div>
</body>
</html>
I'm working in IE7 and FF3. Thanks.
Welcome to the IE box model bug
You may try
body{
zoom:1;
}
I'm not sure if this will help, but it could be a quick fix if it does!
I don't have a specific answer but I have struggled with the differences between IE and FF as it relates to margins and padding.
You may need to explicitly put in the doc type tag. Especially strict mode. That should get them force them into the same layout model. From there on you are dealing with an art rather than a science.
Good luck.