添加＆＃39;缩放线＆＃39;在div的一侧，作为一个比例来分析内容＆＃39;

时间：2014-10-22 10:49:34

标签： html css asp.net-mvc

我目前有this JsFiddle设计，其中就像一个“比例”，在视觉上告诉我什么时候我的'坦克'已经满了。

（我使用内部底部边框来实现div中的第二种颜色，因此获得“其他颜色”不是问题 - 可能不是最好的选择，但它有效！）

div设置为500px高，我希望每侧10 / 20px都有“刻度线”（类似于温度计压力计）。

一般来说，我对css / javascript /网页设计不太满意，而且我对如何制作/创建像

这样的东西完全不知所措

enter image description here

我目前的css是：

.addDropShadowToTank{
     box-shadow: 10px 10px 10px #393939;
     border-radius:30px;
     display:table-cell;
     font-size:large;
     width:350px;
     height:500px;
     vertical-align:middle; 
     text-align:center; 
     background-color: #fa5858;
}

我在想像Z-index这样的东西会有所帮助，但即使是这个简单的任务也似乎超出了我的范围：（

即使我 以某种方式管理这个，我怎样才能让这些线在div的高度上显示均匀？

类似的东西：

 Current:            Wanted:
 +--------+          +--------+
 |        |          |       _|  <-- how to achieve this sort of scale design?
 |        |          |        |
 |        |          |       _|
 |        |          |        |
 |        |          |       _|
 |wwwwwwww|          |wwwwwwww|
 |    O   |          |    O  _|
 |  O     |          |  O     |
 |     o  |          |     o _|
 | o      |          | o      |
 +--------+          +--------+

请注意

我已经更新了JSfiddle以向您显示内容（它需要删除一些冗余的javascript）。实际上，百分比是根据我的模型数据计算的，而不是硬编码。

3 个答案:

答案 0 :(得分：3)

您可以使用css渐变结合background-size创建缩放，而无需使用任何图像。

您只需调整background-size属性即可缩放背景 - 如果您希望行之间的间距20px，请将px值更改为20px - 解决方案是动态的。

 .thermometer {
position:relative;
width:200px;
height:300px;
border-radius:30px;
overflow:hidden;
background:green;
}
.fluid {
position:absolute;
overflow:hidden;
width:100%;
bottom:0;
left:0;
background:blue;
box-shadow: 10px 10px 10px #393939;
}
.thermometer:after {
content:"";
z-index:1000;
width:50px;
height:100%;
position:absolute;
z-index:100;
right:0;
bottom:0;
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0) 72%, rgba(125, 185, 232, 0) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(4%, rgba(0, 0, 0, 1)), color-stop(5%, rgba(0, 0, 0, 0)), color-stop(14%, rgba(0, 0, 0, 0)), color-stop(72%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(125, 185, 232, 0)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0) 72%, rgba(125, 185, 232, 0) 100%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0) 72%, rgba(125, 185, 232, 0) 100%);
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0) 72%, rgba(125, 185, 232, 0) 100%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0) 72%, rgba(125, 185, 232, 0) 100%);
background-size:5%;
}
<div class="thermometer">
<div class="fluid" style="height:40%"></div>
</div>

答案 1 :(得分：1)

这是使用它的一种方法，你可以完全实现你想要做的事情。您可以在:after元素上使用#myTank伪相选择器，并在其上应用图像背景，这将是使用Photoshop或任何其他图形软件创建的比例图像。

这是实时 jsFiddle 。

  var percent = 40;
  var cap = 100;
  percent = (percent / cap).toFixed(2);
  var width = percent * 500;


  document.getElementById("myTank").style["background-color"] = "green";

  document.getElementById("myTank").style["border-bottom"] = width + "px solid blue";
  document.getElementById("myTank").style["height"] = 500 - width + "px";
  document.getElementById("myPercentage").innerText = percent * 100 + "%";
.addDropShadowToTank {
  box-shadow: 10px 10px 10px #393939;
  border-radius: 30px;
  display: table-cell;
  font-size: large;
  width: 350px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
  background-color: #fa5858;
}
div#myTank:after {
  content: '';
  position: absolute;
  background: url(http://s28.postimg.org/bclakfrvt/bars.png);
  width: 100%;
  height: 440px;
  background-repeat-x: no-repeat;
  margin-top: -120px;
  margin-left: 159px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="float:right; padding-right:150px">
  <div id="myPercentage" style="font-weight:bold; font-size:large"></div>
  <div id="myTank" class="addDropShadowToTank"></div>

答案 2 :(得分：0)

在不使用图像的情况下创建初始比例线

避免使用图片，我最初使用Ultimate CSS Gradient Generator生成以下内容，使用#fa5858填充背景，并在每10个百分位（10到90）放置#000渐变：

Ultimate CSS Gradient Generator Result

这给了我们以下（有点难看）的CSS（我也应用于你的JSFiddle demo）：

figure {
    height: 500px;
    width: 350px;
  
	background: #fa5858; /* Old browsers */
	background: -moz-linear-gradient(top,  #fa5858 0%, #fa5858 9%, #fa5858 9%, #000000 10%, #fa5858 11%, #fa5858 19%, #000000 20%, #fa5858 21%, #fa5858 29%, #000000 30%, #fa5858 31%, #fa5858 39%, #000000 40%, #fa5858 41%, #fa5858 49%, #000000 50%, #fa5858 51%, #fa5858 59%, #000000 60%, #fa5858 61%, #fa5858 69%, #000000 70%, #fa5858 71%, #fa5858 79%, #000000 80%, #fa5858 81%, #fa5858 89%, #000000 90%, #fa5858 91%, #fa5858 100%, #fa5858 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa5858), color-stop(9%,#fa5858), color-stop(9%,#fa5858), color-stop(10%,#000000), color-stop(11%,#fa5858), color-stop(19%,#fa5858), color-stop(20%,#000000), color-stop(21%,#fa5858), color-stop(29%,#fa5858), color-stop(30%,#000000), color-stop(31%,#fa5858), color-stop(39%,#fa5858), color-stop(40%,#000000), color-stop(41%,#fa5858), color-stop(49%,#fa5858), color-stop(50%,#000000), color-stop(51%,#fa5858), color-stop(59%,#fa5858), color-stop(60%,#000000), color-stop(61%,#fa5858), color-stop(69%,#fa5858), color-stop(70%,#000000), color-stop(71%,#fa5858), color-stop(79%,#fa5858), color-stop(80%,#000000), color-stop(81%,#fa5858), color-stop(89%,#fa5858), color-stop(90%,#000000), color-stop(91%,#fa5858), color-stop(100%,#fa5858), color-stop(100%,#fa5858)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fa5858 0%,#fa5858 9%,#fa5858 9%,#000000 10%,#fa5858 11%,#fa5858 19%,#000000 20%,#fa5858 21%,#fa5858 29%,#000000 30%,#fa5858 31%,#fa5858 39%,#000000 40%,#fa5858 41%,#fa5858 49%,#000000 50%,#fa5858 51%,#fa5858 59%,#000000 60%,#fa5858 61%,#fa5858 69%,#000000 70%,#fa5858 71%,#fa5858 79%,#000000 80%,#fa5858 81%,#fa5858 89%,#000000 90%,#fa5858 91%,#fa5858 100%,#fa5858 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fa5858 0%,#fa5858 9%,#fa5858 9%,#000000 10%,#fa5858 11%,#fa5858 19%,#000000 20%,#fa5858 21%,#fa5858 29%,#000000 30%,#fa5858 31%,#fa5858 39%,#000000 40%,#fa5858 41%,#fa5858 49%,#000000 50%,#fa5858 51%,#fa5858 59%,#000000 60%,#fa5858 61%,#fa5858 69%,#000000 70%,#fa5858 71%,#fa5858 79%,#000000 80%,#fa5858 81%,#fa5858 89%,#000000 90%,#fa5858 91%,#fa5858 100%,#fa5858 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fa5858 0%,#fa5858 9%,#fa5858 9%,#000000 10%,#fa5858 11%,#fa5858 19%,#000000 20%,#fa5858 21%,#fa5858 29%,#000000 30%,#fa5858 31%,#fa5858 39%,#000000 40%,#fa5858 41%,#fa5858 49%,#000000 50%,#fa5858 51%,#fa5858 59%,#000000 60%,#fa5858 61%,#fa5858 69%,#000000 70%,#fa5858 71%,#fa5858 79%,#000000 80%,#fa5858 81%,#fa5858 89%,#000000 90%,#fa5858 91%,#fa5858 100%,#fa5858 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fa5858 0%,#fa5858 9%,#fa5858 9%,#000000 10%,#fa5858 11%,#fa5858 19%,#000000 20%,#fa5858 21%,#fa5858 29%,#000000 30%,#fa5858 31%,#fa5858 39%,#000000 40%,#fa5858 41%,#fa5858 49%,#000000 50%,#fa5858 51%,#fa5858 59%,#000000 60%,#fa5858 61%,#fa5858 69%,#000000 70%,#fa5858 71%,#fa5858 79%,#000000 80%,#fa5858 81%,#fa5858 89%,#000000 90%,#fa5858 91%,#fa5858 100%,#fa5858 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa5858', endColorstr='#fa5858',GradientType=0 ); /* IE6-9 */
}
<figure></figure>

实施例

Initial Example

确保刻度线仅出现在元素宽度的最后10％

现在的问题只是使这些线条不能填充100％的宽度。不幸的是，我不确定在纯CSS中是否有任何方法可以做到这一点，所以我不得不在你的标记中添加一个新元素：

<div id="myTank" class="addDropShadowToTank">
    <div></div>
</div>

然后确保overflow元素上的hidden设置为.addDropShadowToTank。然后最终为这个新的div元素100％height和90％width提供与.addDropShadowToTank元素相同的背景颜色（可在this JSFiddle demo中看到） ）。

以下是修改后的代码段：

figure {
    height: 500px;
    width: 350px;
  
	background: #fa5858; /* Old browsers */
	background: -moz-linear-gradient(top,  #fa5858 0%, #fa5858 9%, #fa5858 9%, #000000 10%, #fa5858 11%, #fa5858 19%, #000000 20%, #fa5858 21%, #fa5858 29%, #000000 30%, #fa5858 31%, #fa5858 39%, #000000 40%, #fa5858 41%, #fa5858 49%, #000000 50%, #fa5858 51%, #fa5858 59%, #000000 60%, #fa5858 61%, #fa5858 69%, #000000 70%, #fa5858 71%, #fa5858 79%, #000000 80%, #fa5858 81%, #fa5858 89%, #000000 90%, #fa5858 91%, #fa5858 100%, #fa5858 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa5858), color-stop(9%,#fa5858), color-stop(9%,#fa5858), color-stop(10%,#000000), color-stop(11%,#fa5858), color-stop(19%,#fa5858), color-stop(20%,#000000), color-stop(21%,#fa5858), color-stop(29%,#fa5858), color-stop(30%,#000000), color-stop(31%,#fa5858), color-stop(39%,#fa5858), color-stop(40%,#000000), color-stop(41%,#fa5858), color-stop(49%,#fa5858), color-stop(50%,#000000), color-stop(51%,#fa5858), color-stop(59%,#fa5858), color-stop(60%,#000000), color-stop(61%,#fa5858), color-stop(69%,#fa5858), color-stop(70%,#000000), color-stop(71%,#fa5858), color-stop(79%,#fa5858), color-stop(80%,#000000), color-stop(81%,#fa5858), color-stop(89%,#fa5858), color-stop(90%,#000000), color-stop(91%,#fa5858), color-stop(100%,#fa5858), color-stop(100%,#fa5858)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fa5858 0%,#fa5858 9%,#fa5858 9%,#000000 10%,#fa5858 11%,#fa5858 19%,#000000 20%,#fa5858 21%,#fa5858 29%,#000000 30%,#fa5858 31%,#fa5858 39%,#000000 40%,#fa5858 41%,#fa5858 49%,#000000 50%,#fa5858 51%,#fa5858 59%,#000000 60%,#fa5858 61%,#fa5858 69%,#000000 70%,#fa5858 71%,#fa5858 79%,#000000 80%,#fa5858 81%,#fa5858 89%,#000000 90%,#fa5858 91%,#fa5858 100%,#fa5858 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fa5858 0%,#fa5858 9%,#fa5858 9%,#000000 10%,#fa5858 11%,#fa5858 19%,#000000 20%,#fa5858 21%,#fa5858 29%,#000000 30%,#fa5858 31%,#fa5858 39%,#000000 40%,#fa5858 41%,#fa5858 49%,#000000 50%,#fa5858 51%,#fa5858 59%,#000000 60%,#fa5858 61%,#fa5858 69%,#000000 70%,#fa5858 71%,#fa5858 79%,#000000 80%,#fa5858 81%,#fa5858 89%,#000000 90%,#fa5858 91%,#fa5858 100%,#fa5858 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fa5858 0%,#fa5858 9%,#fa5858 9%,#000000 10%,#fa5858 11%,#fa5858 19%,#000000 20%,#fa5858 21%,#fa5858 29%,#000000 30%,#fa5858 31%,#fa5858 39%,#000000 40%,#fa5858 41%,#fa5858 49%,#000000 50%,#fa5858 51%,#fa5858 59%,#000000 60%,#fa5858 61%,#fa5858 69%,#000000 70%,#fa5858 71%,#fa5858 79%,#000000 80%,#fa5858 81%,#fa5858 89%,#000000 90%,#fa5858 91%,#fa5858 100%,#fa5858 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fa5858 0%,#fa5858 9%,#fa5858 9%,#000000 10%,#fa5858 11%,#fa5858 19%,#000000 20%,#fa5858 21%,#fa5858 29%,#000000 30%,#fa5858 31%,#fa5858 39%,#000000 40%,#fa5858 41%,#fa5858 49%,#000000 50%,#fa5858 51%,#fa5858 59%,#000000 60%,#fa5858 61%,#fa5858 69%,#000000 70%,#fa5858 71%,#fa5858 79%,#000000 80%,#fa5858 81%,#fa5858 89%,#000000 90%,#fa5858 91%,#fa5858 100%,#fa5858 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa5858', endColorstr='#fa5858',GradientType=0 ); /* IE6-9 */
  
    overflow: hidden;
}

figure div {
    height: 100%;
    width: 90%;
  
    background: #fa5858;
}
<figure>
    <div></div>
</figure>

我们现在每10％的高度出现一条黑线，只显示在元素宽度的最后10％。

最终结果

Final Result

  詹姆斯，谢谢你的回答。然而，由于我使用的是“边框底部”（参见编辑过的小提琴） - 这意味着“渐变线”只显示坦克中有“空气”的部分......

为此，我们可以在我们的坦克中添加另一个元素。

首先，首先将.addDropShadowToTank元素设置为position: relative，然后添加以下内容：

<div id="myTank" class="addDropShadowToTank">
    <div></div>
    <span id="fill"></span>
</div>

我们现在可以将以下样式应用于#fill范围：

.addDropShadowToTank #fill {
    width: 100%;
    background: rgba(0, 0 , 255, 0.5);
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
}

这将使我们的填充颜色略微透明（允许我们看到它下面的刻度线）。现在我们可以简单地改变JavaScript。删除border部分以及有关在height元素上设置.addDropShadowToTank的部分，然后添加：

document.getElementById("fill").style["height"]=width +"px";

JSFiddle demo

相关问题
最新问题