DIV+CSS实现信纸效果要求能输入

沐听风 2015-11-05 03:25:22

我大致思路有但是还是实现不了，望前辈们告诉下，最好写几句代码看得清晰点，新手恳请告知

思路：设置文本框的CSS 来实现上下平铺 background

...全文

3212 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

tomorrow93 2018-04-06

打赏
举报

用背景图片，简单粗暴

落落落落落落落落 2018-04-02

打赏
举报

你这是在论坛求代码把

请叫我小吴 2018-04-01

打赏
举报

  <!-- 信内容 -->
	 <div class="letter-content">
	 	<!-- 信纸格式背景 -->
	 	<div class="letter-layout">
	 		<div class="letter-line"></div>
	 		<div class="letter-line"></div>
	 		<div class="letter-line"></div>
	 		<div class="letter-line"></div>
	 	</div>
	 	 <textarea class="letter-text" bindfocus="" value="喜欢你的人很多，不缺我一个。我喜欢的人很少，除你就没了。我说不出来为" />

	 </div>

/*信件内容*/
.letter-content {
    width: 550rpx;
    height: 312rpx;
    margin: 0 auto;
    /*  background: green;*/
    position: relative;
}

.letter-layout {
    position: absolute;
    left: 0;
    top: 0;
    width: 550rpx;
}

.letter-line {
    height: 20px;
    height: 77rpx;
    line-height: 77rpx;
    border-bottom: 1rpx solid #e0e0e0;
}


.letter-text {
    position: absolute;
    left: 0;
    top: 0;
    width: 550rpx;
    height: 311rpx;
    line-height: 77rpx;
    font-size: 40rpx;
    color: #999999;
}

sw198613 2015-12-22

打赏
举报

如果你要实现你图片的效果的话，纯css就可以搞定了，请看下面这个链接 http://www.zhangxinxu.com/study/201102/css3-page-effect-demo3.html

Mr.Gao 2015-11-11

打赏
举报

引用 5 楼风中的少年的回复:

思路是这样的使用textarea , 给它一个背景是信纸，设一下文字大小、再设一下行高就可以了。大概是这样
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
	#oDiv textarea{width:100%; height: 500px; background: url(dot.png); line-height: 48px; font-size: 20px;}
</style>

</head>
<body>
<div id="oDiv">
	<textarea ></textarea>
</div>
</body>
</html>

你写的我试了下然而因为信纸有的有图案如果把文本框的背景换成信纸那么有图案的地方也同样可以写字这样就乱了怎样设置与文本框边距之类的我是学生所以有些不太懂望指教

沐听风 2015-11-06

打赏
举报

你这代码写的你在逗我们？

KK3K2005 2015-11-06

打赏
举报

引用楼主 qq_15960351 的回复:

我大致思路有但是还是实现不了，望前辈们告诉下，最好写几句代码看得清晰点，新手恳请告知思路：设置文本框的CSS 来实现上下平铺 background

思路都说的这么直白了自己多动动手写代码

风中的少年 2015-11-06

打赏
举报

思路是这样的使用textarea , 给它一个背景是信纸，设一下文字大小、再设一下行高就可以了。大概是这样


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
	#oDiv textarea{width:100%; height: 500px; background: url(dot.png); line-height: 48px; font-size: 20px;}
</style>

</head>
<body>
<div id="oDiv">
	<textarea ></textarea>
</div>
</body>
</html>

zpjshiwo77 2015-11-05

打赏
举报


<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js" type="text/javascript"></script>

<style type="text/css">
.xxx{
	height: 20px;
	width: 100%;
	border: 0px;
	border-bottom: 1px solid #c3c3c3;
}
.xxx:focus,.xxx2:focus{
	outline: none;
}
.xxx2{
	height: 20px;
	width: 100%;
	border: 0px;
	border-bottom: 1px solid #c3c3c3;
	background: #f5f7fa;
}
</style>
</head> 
<body>
<input class="xxx">
<input class="xxx2">
<input class="xxx">
<input class="xxx2">
<input class="xxx">
<input class="xxx2">
<input class="xxx">
<input class="xxx2">
<input class="xxx">
<input class="xxx2">
<input class="xxx">
<input class="xxx2">
<script type="text/javascript">
</script>
</body> 
</html>