0

我想要我的博主的文本框，我可以在其中发布 Html - CSS 代码，用户可以复制它们。示例 = http://3.bp.blogspot.com/-OhvKmLgY-O4/UnaA9HGfcVI/AAAAAAAAA3Y/b4VrxT8BK8U/s1600/Long+code.png

我的图片链接 = http://1.bp.blogspot.com/-i3AX6FFu9N8/UnYbGgMgYhI/AAAAAAAAA2k/SFv0kK7x6YI/s1600/Coding+Place+For+Blogger.png

如果代码很小，我想要那个。它应该会自动变成这样 = http://1.bp.blogspot.com/-RYmQ9CRKiVw/UnaAv0niNuI/AAAAAAAAA3Q/2Fi6bRvkUUg/s1600/small+code.png

如果代码很长，它应该自动像这样 = http://3.bp.blogspot.com/-OhvKmLgY-O4/UnaA9HGfcVI/AAAAAAAAA3Y/b4VrxT8BK8U/s1600/Long+code.png

当我尝试制作它并将代码粘贴到其中时，它变得可怕，您可以看到 = http://1.bp.blogspot.com/-CP8_CBwHwMk/UnZ33pJdhEI/AAAAAAAAA2w/8e8mZUsAwRo/s1600/solution+please.png

代码：

#tbox1 {
    background:url(http://1.bp.blogspot.com/-i3AX6FFu9N8/UnYbGgMgYhI/AAAAAAAAA2k/SFv0kK7x6YI/s1600/Coding+Place+For+Blogger.png) no-repeat;
    width:500px;
    height:380px;
    margin:10px;
    padding:20px 40px;
    overflow:auto;
    word-wrap:nowrap;
    /*font styles*/
    font-family:'Open Sans', sans-serif;
    font-size:16px;
    /*1em*/
    color:#000000;
    line-height:20px;
}

代码

<div id="tbox1">Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code Testing The Code v</div>

你可以在 JsFiddle 上看到发生在我身上的事情

http://jsfiddle.net/e5nHr/

4

2 回答 2

0

将此代码添加到您的 css 中：

background-repeat: no-repeat;

我还注意到您提供的图像在左边框上有一些设计，因此您还需要提供一些填充

padding-left: 60px;
padding-top: 10px;
于 2013-11-03T10:03:52.977 回答
0

http://jsfiddle.net/H7569/

 #tbox1 {
     background:url(http://1.bp.blogspot.com/-i3AX6FFu9N8/UnYbGgMgYhI/AAAAAAAAA2k/SFv0kK7x6YI/s1600/Coding+Place+For+Blogger.png) no-repeat center center;
     width:500px;
     height:333px;
     margin:10px;
     /*font styles*/
     font-family:'Open Sans', sans-serif;
     font-size:16px;
     /*1em*/
     color:#000000;
     line-height:20px;
 }
 .content {
     width: 410px;
     height: 290px;
     overflow: auto;
     position: relative;
     top: 20px;
     left: 60px;
     bottom: 20px;
     right: 20px;
 }
于 2013-11-03T16:37:41.473 回答