问题描述
你过得怎么样? 是否可以在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>
解决方法
-
让背景包含图像并更改容器大小。
这可以工作。
编辑*
-
我认为您正在寻找类似的东西。
/*.............. 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.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>