Blogger 文本框

Question

我想要我的博客的文本框，我可以在其中发布 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

CSS 代码：

#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;
}

HTML 代码

<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/

Answer 1

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

background-repeat: no-repeat;

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

padding-left: 60px;
padding-top: 10px; 

Answer 2

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;
 }

Answer 3

我的回答是：请参阅 Blogger 中的标题描述。巴勃罗·费利斯