如何淡化不同的背景而不是文本

时间:2017-05-24 22:59:31

标签: html css

我在网站的不同部分使用不同的背景。我需要帮助来淡化所有背景图像,而不是它上面的文字。 MY post

    Sub NoStdHC()
'
' NoStdHC Macro created by 
'

'
    Application.ScreenUpdating = False
    Sheets("Base434").Select
    LastRow = Cells(Rows.Count, "B").End(xlUp).Row
    ActiveSheet.Range("A1:T" & LastRow).AutoFilter Field:=15
    ActiveSheet.Range("A1:T" & LastRow).AutoFilter Field:=10
    ActiveSheet.Range("A1:T" & LastRow).AutoFilter Field:=10, Criteria1:="<=.5", _
        Operator:=xlAnd
    Columns(11).Cells.SpecialCells(xlCellTypeVisible).Cells(2).Select
    Range(Selection, Selection.End(xlDown)).Select
    Selection.Copy
    Sheets("Processing").Select
    Range("AC1").Select
    Selection.PasteSpecial Paste:=xlPasteValues, Operation:=xlNone, SkipBlanks _
        :=False, Transpose:=False
    Range("C5").Select
    Application.CutCopyMode = False
    ActiveCell.FormulaR1C1 = "=COUNTA(C[26])"
    Range("e5").Select
    ActiveCell.FormulaR1C1 = "=SUM(C[24])"
    Range("C8").Select
    Sheets("Base434").Select
    Dim wsTest As Worksheet
    Const strSheetName As String = "PR0OnStd"

    Set wsTest = Nothing
    On Error Resume Next
    Set wsTest = ActiveWorkbook.Worksheets(strSheetName)
    On Error GoTo 0

    If wsTest Is Nothing Then
    Worksheets.Add.Name = strSheetName
    Sheets("Base434").Select
    Range("A1").Select
    Range(Selection, Selection.End(xlToRight)).Select
    Selection.Copy
    Sheets("PR0OnStd").Select
    Selection.PasteSpecial Paste:=xlPasteValues, Operation:=xlNone, SkipBlanks _
        :=False, Transpose:=False
    Selection.Columns.AutoFit
    Range("A2").Select
    With ActiveWindow
        .SplitColumn = 0
        .SplitRow = 1
    End With
    ActiveWindow.FreezePanes = True
    End If
    Sheets("Base434").Select
    Range("a1").Select
    Columns(1).Cells.SpecialCells(xlCellTypeVisible).Cells(2).Select
    Range(Selection, Selection.End(xlDown)).Select
    Range(Selection, Selection.End(xlToRight)).Select
    Selection.Copy
    Sheets("PR0OnStd").Select
    LastRow = ActiveSheet.Cells(Rows.Count, "A").End(xlUp).Row + 1
    Range("A" & LastRow).Select
    Selection.PasteSpecial Paste:=xlPasteValues, Operation:=xlNone, SkipBlanks _
        :=False, Transpose:=False
    Application.ScreenUpdating = True
End Sub'

<div class="post" style="background-image: url(https://bensmann.no/wp-content/uploads/2017/01/New-Blue-Profile.jpg)">
  <div class="product">
    <h3>The Monarch</h3>
    <p>The Monarch Bike is our original beach cruiser. It's perfect for strolling bike rides down beach promenades and small enough to stash just anywhere.</p>
    <a href="/posts/p9chargingonwheels.html" class="btn">Read More</a>
  </div>

1 个答案:

答案 0 :(得分:2)

为帖子使用唯一的类,并在CSS中为相应的类指定背景图像。

&#13;
&#13;
.post {
  height: 100%;
  width: 100%;
  z-index: 1;
}

.background {
  position: relative;
}

.background:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  opacity: 0.3;
  z-index: -1;
}

.background1:after {
  background-image: url(http://www.planwallpaper.com/static/images/HD-Wallpapers1_FOSmVKg.jpeg);
}

.background2:after {
  background-image: url(http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg);
}
&#13;
<div class="post background background1">
  <div class="product">
    <h3>The Monarch</h3>
    <p>The Monarch Bike is our original beach cruiser. It's perfect for strolling bike rides down beach promenades and small enough to stash just anywhere.</p>
    <a href="#" class="btn">Read More</a>
  </div>
</div>

<div class="post background background2">
  <div class="product">
    <h3>The Monarch2</h3>
    <p>The Monarch Bike is our original beach cruiser. It's perfect for strolling bike rides down beach promenades and small enough to stash just anywhere.</p>
    <a href="#" class="btn">Read More</a>
  </div>
</div>
&#13;
&#13;
&#13;