如何在图像上书写文字 [英] How can I write text on image

问题描述

我的HTML代码 -

My html code -

!-- Container Start -->

<div id="container" style="display:none;" class="animate-bottom">

			<div class="row">
			<div class="col-12">
				<div id="bg"><img src="1280x850.jpg" alt="readMore">
				<div class="readMore-box">
					<a href="#logo"><nav class="readMore">read more</nav></a>
					<div class="arrowDown"></div>
				</div></div>
			</div>
			</div>

我的CSS代码 -

my CSS code -

#container {
	position: relative;
	width: 100%;
	max-height: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

#bg img{
	width: 100%;
	height: auto;
}

.readMore-box {
	height: 100px;
	padding: 10px;
	text-align: center;
/*	border: 1px solid white; */
	background: red;
	z-index: 100;
}

nav.readMore {
	background: #000000;
	border: 1px solid #ffffff;
	color: #c2a75d;
	margin: auto;
	padding: 10px;
	width: 150px;
	text-align: center;
	transition-duration: 0.4s;
}

我尝试过：



我希望我的链接按钮读取更多图像。

What I have tried:

I wants my link button "read more" over an image.

推荐答案

查看 CSS布局 - 位置属性 [ ^ ]，探索可以找到解决问题的线索的示例。



+++++ [为了进一步查询而添加] +++++



用于网页的res ponsive，您必须使用CSS媒体查询来检测屏幕宽度的变化并应用相应的样式表。从这篇文章开始，关于响应式网页设计的三个响应 - Peter Leow的代码博客 [< a href =http://www.peterleowblog.com/three-rs-responsive-web-design/target =_ blanktitle =New Window> ^ ]

Check out the CSS Layout - The position Property[^], explore the examples where you will find the clue to solving your problem.

+++++[Added in response to further query]+++++

For web pages to be responsive, you have to engage the CSS media queries to detect the change in screen width and apply the appropriate style sheets. Start with this article on The Three R's of Responsive Web Design - Peter Leow's Code Blog[^]

这篇关于如何在图像上书写文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！