时间戳

首页 > 解决方案 > 将图像添加到 iMessages 风格的聊天网页

html - 将图像添加到 iMessages 风格的聊天网页

问题描述

我正在开发基于此代码示例的 iMessages 风格的聊天网页。

我已经完成了这项工作，现在需要添加内联图像，以便它们显示为消息线程的一部分。基本的 HTML/CSS 是这样的：

body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  max-width: 700px;
  margin: 25px auto;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

p {
  max-width: 300px;
  word-wrap: break-word;
  margin-bottom: 12px;
  line-height: 24px;
  position: relative;
  padding: 10px 20px;
  border-radius: 25px;
}

p:before,
p:after {
  content: "";
  position: absolute;
  bottom: -2px;
  height: 20px;
}

.message-outgoing {
  color: white;
  background: #0B93F6;
  align-self: flex-end;
}

.message-outgoing:before {
  right: -7px;
  border-right: 20px solid #0B93F6;
  border-bottom-left-radius: 16px 14px;
  -webkit-transform: translate(0, -2px);
  transform: translate(0, -2px);
}

.message-outgoing:after {
  right: -56px;
  width: 26px;
  background: white;
  border-bottom-left-radius: 10px;
  -webkit-transform: translate(-30px, -2px);
  transform: translate(-30px, -2px);
}

.message-incoming {
  background: #E5E5EA;
  color: black;
}

.message-incoming:before {
  left: -7px;
  border-left: 20px solid #E5E5EA;
  border-bottom-right-radius: 16px 14px;
  -webkit-transform: translate(0, -2px);
  transform: translate(0, -2px);
}

.message-incoming:after {
  left: 4px;
  width: 26px;
  background: white;
  border-bottom-right-radius: 10px;
  -webkit-transform: translate(-30px, -2px);
  transform: translate(-30px, -2px);
}
<p class="message-outgoing">Hi - here's out breakfast bowl. Let me know what you think?</p>
<img src="https://media.timeout.com/images/103803770/750/422/image.jpg">
<p class="message-incoming">Looks yummy!</p>

<p class="message-outgoing">Glad you like it - look forward to seeing you for breakfast soon.</p>

我添加了一个显示图像，但我需要为接收的图像和发送的图像设置 2 个类，类似于消息传出和消息传入。我还需要图像不要扩展到页面的整个宽度，而是与消息传出和消息传入共享相同的最大宽度。

无法确定在这里使用什么 CSS 来为传出和传入的 2 个图像类设置这些图像的最大宽度。

标签： htmlcssimage

解决方案

您可以尝试为 img 消息创建一个新类，作为非 iPhone 用户，我不知道图像底部是否有小“气泡语音”的东西，但如果他们这样做会更难，因为它会涉及背景剪辑适合消息气泡形状的 SVG。
您可以执行以下操作来添加一些图像。

您可以从类中删除背景图像img-msg，只需为要添加的每个图像创建一些类，例如name-img使用某个背景图像 URL 等...

body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: normal;
  max-width: 450px;
    margin: 50px auto;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

p {
  max-width: 255px;
  word-wrap: break-word;
  margin-bottom: 12px;
  line-height: 24px;
  position:relative;
    padding:10px 20px;
  border-radius:25px;
}

p:before, p:after {
    content:"";
        position:absolute;
    bottom:-2px;
    height:20px;
  }

.from-me {
    color:white; 
    background:#0B93F6;
    align-self: flex-end;
}

.from-me:before {
        right:-7px;
        border-right:20px solid #0B93F6;
        border-bottom-left-radius: 16px 14px;
        -webkit-transform:translate(0, -2px);
                transform:translate(0, -2px);
    }

.from-me:after {
        right:-56px;
        width:26px;
        background:white;
        border-bottom-left-radius: 10px;
        -webkit-transform:translate(-30px, -2px);
                transform:translate(-30px, -2px);
    }
.from-them {
    background:#E5E5EA;
    color:black;
}
.from-them:before {
        left:-7px;
        border-left:20px solid #E5E5EA;
        border-bottom-right-radius: 16px 14px;
        -webkit-transform:translate(0, -2px);
                transform:translate(0, -2px);
    }
.from-them:after {
        left:4px;
        width:26px;
        background:white;
        border-bottom-right-radius: 10px;
        -webkit-transform:translate(-30px, -2px);
                transform:translate(-30px, -2px);
    }
 .img-msg {
   background-image: url('https://source.unsplash.com/random/375x812'); 
   width: 100%;
   height: 80vh;
   min-height: 400px;
   background-repeat: no-repeat;
   //background-attachment: fixed;
   background-position: center;
}
 .img-msg:before {
   display: none !important
}
.iphone-img{

   background-image: url('https://images.unsplash.com/photo-1597740985671-2a8a3b80502e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80') !important; 

}
    
<p class="from-me">Hey there! What's up</p>
<p class="from-them">Checking out iOS7 you know..</p>
<p class="from-me">Check this out</p>
<p class="from-me img-msg"></p>
<p class="from-them">I got the same picture !</p>
<p class="from-them img-msg"></p>
<p class="from-them">Now, check this one !</p>
<p class="from-them img-msg iphone-img"></p>

推荐阅读