小编EyW*_*yWN的帖子

背景像素化

我正在寻找这样的背景效果(在纯CSS中),我该怎么做？

(缩放图像)

码:

html,
body {
  height:100%;
  background-color:#3D3D3D;
  display:flex;
}

div {
  height: 100px;
  width:100px;
  margin:10px auto;
  background-image: linear-gradient(45deg, #868686 25%, transparent 25%, transparent 75%, #868686 75%, #868686), linear-gradient(45deg, #868686 25%, transparent 25%, transparent 75%, #868686 75%, #868686);
  background-position: 0 0, 51px 51px;
  background-color: #222222;
  background-size: 2px 2px;
}

Run Code Online (Sandbox Code Playgroud)

<div></div>

Run Code Online (Sandbox Code Playgroud)

html css background css3 css-gradients

EyW*_*yWN

2017 08-02

5
推荐指数

1
解决办法

445
查看次数

聊天系统对齐

（有关我想要的实时演示，请参阅底部的更新）

我有一个带聊天系统的在线游戏，但 CSS 很烂。

图像示例：

和两个代码示例 这里我使用了绝对与用户的位置，并且语音可以继续其他语音。

.speech-container {
  position:absolute;
  top:0;
  left:0;
  height:250px;
  background:rgba(0,0,0,.15);
  width:100%;
}

.speech {
  background:white;
  border:1px solid brown;
  padding:10px;
  border-radius:5px;
  position:absolute;
}

Run Code Online (Sandbox Code Playgroud)

<div class="speech-container">
  <div class="speech red" style="left:20px;top:10px">
    <span><b>User1:</b> Test</span>
  </div>
  <div class="speech red" style="left:20px;top:60px">
    <span><b>User1:</b> Test</span>
  </div>
  <div class="speech blue" style="left:120px;top:10px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:120px;top:60px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:120px;top:110px">
    <span><b>User2:</b> Testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</span>
  </div>
  <div class="speech blue" style="left:120px;top:160px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:20px;top:110px">
    <span><b>User1:</b> Testtttttttttttttttttttttttttttttttttttt (pronounced after the user2 …

Run Code Online (Sandbox Code Playgroud)

javascript css jquery alignment

EyW*_*yWN

2017 08-08

5
推荐指数

1
解决办法

88
查看次数