在照片顶部的文本 [英] Text On Top of Photo
问题描述
我希望CSS大师可以帮助我完成一个看似简单的
目标。我想要的是一张以浏览器为中心的大照片，上面放着
文字。使用下面的CSS，当用户
调整其浏览器窗口大小时，照片在浏览器中心很好但是文本框保持锁定在左侧。当浏览器调整大小时，有没有办法让b / b
的文本框相对于照片移动？
这里是我的CSS：
#photo {
text-align：center;
}
#text {
位置：相对;
text-align：left;
宽度：250px;
身高：250px;
顶部：-300px;
溢出：滚动;
背景颜色：#fff;
填充：12px;
边框：3pt纯黑色;
}
这里''我的HTML：
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 Transitional // EN"
" http： //www.w3.org/TR/html4/loose.dtd">
< html>
< head>
< title> CSS测试< / title>
< link rel =" stylesheet" HREF =" styles.css的" type =" text / css">
< / head>
< body>
< div id =" photo">
< img src =" bluesquare.jpg" ALT =""宽度= QUOT; 750" height =" 450">
< div id =" text">
Lorem ipsum dolor sit amet，consectetuer adipiscing elit。 Duis nunc
eros，scelerisque quis，rutrum a，venenatis sed，felis。 Etiam interdum
sem坐在一个lorem。 Aliquam nec dolor quis neque volutpat fermentum。
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur sodales convallis nisl。
< / div>
< / div>
< /正文>
< / html>
这里是该页面的链接：
http://www.sunriveronline.org/misc/css
任何专家都可以了解我正在尝试做的是否可以获得
？非常感谢。
I''m hoping a CSS guru can help me with what seems like a simple enough
goal. What I''m going for is a large photo centered in the browser with
text positioned on top of it. Using the CSS below, when the user
resizes their browser window, the photo centers in the browser fine but
the text box stays locked on the left hand side. Is there a way to
have the text box move in relation to the photo when the browser is
resized?
Here''s my CSS:
#photo {
text-align: center;
}
#text {
position: relative;
text-align: left;
width: 250px;
height: 250px;
top: -300px;
overflow: scroll;
background-color: #fff;
padding: 12px;
border: 3pt solid black;
}
And here''s my HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS Test</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div id="photo">
<img src="bluesquare.jpg" alt="" width="750" height="450">
<div id="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis nunc
eros, scelerisque quis, rutrum a, venenatis sed, felis. Etiam interdum
sem sit amet lorem. Aliquam nec dolor quis neque volutpat fermentum.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur sodales convallis nisl.
</div>
</div>
</body>
</html>
And here''s a link to the page:
http://www.sunriveronline.org/misc/css
Can any gurus shed some light on whether what I''m trying to do is
possible? Thanks much.
推荐答案
fl * *****@comcast.net 写道：
我希望CSS大师可以帮助我实现一个简单的目标。我要去的是一张以浏览器为中心的大照片，上面放着
文字。使用下面的CSS，当用户
调整浏览器窗口大小时，照片在浏览器中居中，但文本框保持锁定在左侧。当浏览器调整大小时，有没有办法让文本框相对于照片移动？
我怀疑
#text {
text-align：left;
}
I''m hoping a CSS guru can help me with what seems like a simple enough
goal. What I''m going for is a large photo centered in the browser with
text positioned on top of it. Using the CSS below, when the user
resizes their browser window, the photo centers in the browser fine but
the text box stays locked on the left hand side. Is there a way to
have the text box move in relation to the photo when the browser is
resized?
I suspect the
#text {
text-align: left;
}
可能暗示文本保持在左侧。
水平居中div尝试
margin-left：auto;
margin-right：auto;
如果你想要图片上方的文字，请把上面的文字放在上面图片
而不是从下面重新定位文字。
-
jmm dash list（at）sohnen- moe（dot）com
（删除电子邮件的.AXSPAMGN）
might be a hint why the text stays to the left.
To center a div horizontally try
margin-left: auto;
margin-right: auto;
And if you want the text above the image, put the text above the image
rather than re-positioning the text from below.
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
< fl **** **@comcast.net>在消息中写道
news：11 ********************** @ z14g2000cwz.googlegr oups.com ...
<fl******@comcast.net> wrote in message
news:11**********************@z14g2000cwz.googlegr oups.com...
我希望CSS大师可以帮助我实现一个简单的目标。我要去的是一张以浏览器为中心的大照片，上面放着
文字。使用下面的CSS，当用户
调整浏览器窗口大小时，照片在浏览器中居中，但文本框保持锁定在左侧。当浏览器调整大小时，有没有办法让文本框相对于照片移动？
I''m hoping a CSS guru can help me with what seems like a simple enough
goal. What I''m going for is a large photo centered in the browser with
text positioned on top of it. Using the CSS below, when the user
resizes their browser window, the photo centers in the browser fine but
the text box stays locked on the left hand side. Is there a way to
have the text box move in relation to the photo when the browser is
resized?
为什么不制作图像背景图片：
背景：url（bluesquare.jpg）无重复中心;
并调整< div>的大小图片大小。
-
必须飞行
Roy
www.reeddesign.co.uk
我很感谢你们两个人的回复，但不幸的是我没有得到任何建议工作。
Jim，我尝试了边缘自动建议，（以及在图形之前放置文本
）但是它没有使浏览器中的图像中心
窗口。以下是修订文件（修订版1）的链接：
http：// tinyurl。 com / 7zeqn
和Roy，你真的可以在浏览器中设置背景图像
窗口吗？我无法让它发挥作用。这是修订页面的链接
（修订版2）：
http://tinyurl.com/9eeul
以下是每个修订文件的CSS和HTML。如果你能找到我错的地方
，请纠正我。
谢谢。
______________________________
修订1（ http://tinyurl.com/7zeqn）
#photo {
margin-left：auto;
margin-right：auto;
}
#text {
位置：相对;
宽度：250px;
身高：250px ;
顶部：200px;
溢出：滚动;
背景颜色：#fff;
填充： 12px;
边框：3pt纯黑色;
}
< html>
< head>
< title> CSS测试< / title>
< link rel =" stylesheet" HREF =" styles1.css" type =" text / css">
< / head>
< body>
< div id =" photo">
< div id =" text">
Lorem ipsum dolor sit amet，consectetuer adipiscing elit。
< / div>
< img src =" bluesquare.jpg" ALT =""宽度= QUOT; 750" height =" 450">
< / div>
< / body>
< / html>
______________________________
REVISION 2（ http://tinyurl.com/9eeul ）
#photo {
background：url（bluesquare.jpg）无重复中心;
宽度：750px;
身高：450px;
}
#text {
位置：相对;
text-align：left;
宽度：250px;
身高：250px;
顶部：150px;
溢出：滚动;
背景颜色：#fff;
填充：12px;
边框：3pt纯黑色;
}
< html>
< head>
< title> CSS Test< / title>
< link rel =" stylesheet" HREF =" styles2.css" type =" text / css">
< / head>
< body>
< div id =" photo">
< div id =" text">
Lorem ipsum dolor sit amet，consectetuer adipiscing elit。
< / div>
< / div>
< / body>
< / html>
I appreciate the responses from both of you, but unfortunately I
couldn''t get either suggestion to work.
Jim, I tried the margin auto suggestion, (as well as putting the text
before the graphic) but it didn''t make the image center in the browser
window. Here''s a link to the revised file (Revision 1):
http://tinyurl.com/7zeqn
And Roy, can you actually center a background image in the browser
window? I couldn''t get it to work. Here''s a link to that revised page
(Revision 2):
http://tinyurl.com/9eeul
Below is the CSS and HTML for each of the revised files. If you can
spot some place where I went wrong, please do correct me.
Thanks.
______________________________
REVISION 1 (http://tinyurl.com/7zeqn )
#photo {
margin-left: auto;
margin-right: auto;
}
#text {
position: relative;
width: 250px;
height: 250px;
top: 200px;
overflow: scroll;
background-color: #fff;
padding: 12px;
border: 3pt solid black;
}
<html>
<head>
<title>CSS Test</title>
<link rel="stylesheet" href="styles1.css" type="text/css">
</head>
<body>
<div id="photo">
<div id="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<img src="bluesquare.jpg" alt="" width="750" height="450">
</div>
</body>
</html>
______________________________
REVISION 2 (http://tinyurl.com/9eeul )
#photo {
background: url(bluesquare.jpg) no-repeat center center;
width: 750px;
height: 450px;
}
#text {
position: relative;
text-align: left;
width: 250px;
height: 250px;
top: 150px;
overflow: scroll;
background-color: #fff;
padding: 12px;
border: 3pt solid black;
}
<html>
<head>
<title>CSS Test</title>
<link rel="stylesheet" href="styles2.css" type="text/css">
</head>
<body>
<div id="photo">
<div id="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
</body>
</html>
这篇关于在照片顶部的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
