[英]Placing image over text
I have please check the code.. 我请检查代码..
h1 { background: url(http://www.lovethispic.com/uploaded_images/114180-Pink-Glitter-Pattern-.jpg) no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size:80px }
<h1>Welcome</h1>
trying this 尝试这个
============================================= =============================================
answer2 ANSWER2
html HTML
<div id="container">
<h1>HAWAII</h1>
</div>
css CSS
h1, p { margin: 0; }
#container {
padding: 20px 20px 100px;
margin: 50px;
position: relative;
}
#container h1 {
/* has same bg as #container */
background: url(http://media.royalcaribbean.com/content/shared_assets/images/destinations/regions/hero/hawaii_01.jpg);
font-size: 12em;
font-family: impact;
left: 0;
line-height: 100%;
padding-top: 25px; /* padding + border of div */
position: absolute; /* position at top left of #containter to sync bg */
text-align: center;
top: 0;
width: 100%;
text-fill-color: transparent; /* not yet supported */
background-clip: text; /* not yet supported */
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-text-fill-color: transparent; /* not yet supported */
-moz-background-clip: text; /* not yet supported */
/* text-shadow: 5px 5px 0px rgba(0,0,0,0.1); */
}
================ ================
answer3 ANSWER3
css CSS
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
.container {
margin: 0 auto;
max-width: 480px;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.