如何在 css/div 容器中调整背景图像的大小？

Question

你还好吗) 是否可以在 div 背景中调整图像的大小。我的图像是 350 x 80 需要调整为 300 x 70。 是的，我可以使用 Photoshop，但希望通过调整大小来获得那些漂亮的锐利像素。 PS 我不想使用表格等。

下面是我的例子：

body {
    background-color: #6B6B6B;
    font-family: Arial;
    color: darkgrey;
    font-size: 12px;
    line-height: .2;
    letter-spacing: .5px;
}
    /*.............. info ..............*/
    
.info {
position: fixed;
top: 30px;
left: 30px;
grid-template-columns: 60px 300px;
display: grid;
}

  <div class="info" align="center">
  <div><img src="http://wizzfree.com/pix/profile.png" class="bevel2" width="60" height="60"/></div>
  <div style="background-image: url('http://wizzfree.com/pix/bubble.png'); width="300" height="70";"><p>chat text some chat text here some text<p>here some chat text here some text here some<p>chat text here some text here some chat text<p>chat text here some text here some chat text</div>
  </div>

Answer 1

• 让背景包含图像并更改容器大小。

  这应该可行。

编辑*

• 我认为您正在寻找类似的东西。

          /*.............. info ..............*/
  
          :root {
          --body-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
          --msger-bg: #fff;
          --border: 2px solid #ddd;
          --right-msg-bg: #fa6695;
       }
  
         html {
         box-sizing: border-box;
       }
  
        *,
        *:before,
        *:after {
         margin: 0;
         padding: 0;
         box-sizing: inherit;
       }
  
         body {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
         background-image: var(--body-bg);
         font-family: Helvetica, sans-serif;
      }
  
         .msger {
         display: flex;
         flex-flow: column wrap;
         justify-content: space-between;
         width: 100%;
         max-width: 867px;
         margin: 25px 10px;
         height: calc(100% - 50px);
         border: var(--border);
         border-radius: 5px;
         background: var(--msger-bg);
         box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
      }
          
  
          .msg {
          display: flex;
          align-items: flex-end;
          margin-bottom: 10px;
      }
  
          .left-msg .msg-bubble {
           border-bottom-left-radius: 0;
      }
  
          .msg-img {
          width: 50px;
          height: 50px;
          margin-right: 10px;
          background: #ddd;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          border-radius: 50%;
          margin: 0 0 0 10px;
      }
  
          .msg-bubble {
          max-width: 450px;
          padding: 15px;
          border-radius: 15px;
          background: var(--left-msg-bg);
          border-bottom-left-radius: 0;
          background: var(--right-msg-bg);
          color: #fff;
          border-bottom-right-radius: 0;
      }
     
  
          .msg-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
      }
  
          .msg-info-name {
          margin-right: 10px;
          font-weight: bold;
      }
         
          .msg-info-time {
          font-size: 0.85em;
      }
   

     <main class="msger-chat">
      <div class="msg left-msg">
        <div
         class="msg-img"
         style="background-image: url(http://wizzfree.com/pix/profile.png)"
        ></div>
  
        <div class="msg-bubble">
          <div class="msg-info">
            <div class="msg-info-name">Yummi</div>
            <div class="msg-info-time">12:45</div>
          </div>
  
          <div class="msg-text">
              Hi, I suppose you were trying to build something like this and I 
              wish this works. The background should resize to your text 
              size and I wish this helps you. * Try changing this text *
          </div>
        </div>
      </div>
  </main>