标签: opacity

我期待在CodeGear Delphi 2010中绘制不透明椭圆.

我试图绘制另一个位图,我设置了位图透明色(用于背景)调用椭圆方法.

在我的图像中,我使用不透明度参数(来自重载)绘制位图.但它不起作用.

我想要这样的东西http://www.java2s.com/Tutorial/VBImages/WPF-UseOpacityMaskAndRadialGradientBrush.PNG

有人知道一种工作方法吗？

我无法在firefox或IE上访问超链接

如果我设置了a:的背景颜色,它会正常工作,但不会设置优先级.

有任何想法吗？

这是我的css:

a.photo
{
    display: inline-block;
}
a.photo img
{
    border: 1px solid #C8C8C8;
    background-color: #ffffff;
}
a:hover.photo img, 
a:active.photo img {
    background-color: #FF2D59;
    border: 1px solid #FF2D59;
}
a:visited.photo img 
{
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
a.small img
{
    width: 80px;
    height: 80px;
    padding: 6px;
}


<a href="#" class="photo small">
    <img src="http://www.w3schools.com/css/klematis.jpg" alt="small photo hyperlink" />
</a>

我不认为CSS的顺序有什么问题,因为如果我添加背景颜色,它工作得很好:

a:visited.photo img 
{
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */ …

当我画这样的东西时(这里只是随机图纸):

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        DrawingVisual visual = new DrawingVisual();
        DrawingContext context = visual.RenderOpen();

        Pen pen = new Pen(Brushes.Black, 1);

        context.DrawEllipse(Brushes.YellowGreen, pen, new Point(0,0), 40, 40);

        for (int i = 0; i <= 100 - 1; i++)
          context.DrawLine(new Pen(Brushes.Black, 1), new Point(0, i), new Point(i, i));

        context.Close();

        RenderTargetBitmap bmp = new RenderTargetBitmap(100, 100, 96, 96, PixelFormats.Pbgra32);

        bmp.Render(visual);
        image1.Source = bmp;
    }
}

DrawLine和DrawEllipse混合的颜色.(我发现只有DrawLine才使用笔,而不是像Rectangle和Ellipse这样使用Brush的其他形式).奇怪的是,即使是基础网格背景(argh)的LinearGradientBrush的颜色. 我希望它们是z-Ordered,每个都具有完全不透明度.

这里是XAML代码:

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"> …

每当我尝试更改段落的不透明度时，它会更改文本和背景的不透明度，我只想更改文本的背景，我该如何解决？

HTML

<div id="opener">
 <p id="introText">
  Adam Ginther is a<class id="blueText"> front-end developer</class> with an interest in responsive & mobile design
 </p>
</div>

css

#opener {
        background-image: url('images/background.jpg');
        background-color: #373737;
        height: 800px;
        width: 100%;
        position: fixed;
        }

#introText {
        width: 400px;
        color: white;
        background-color: black;
        text-align: center;
        display: table-cell;
        position: absolute;
        top: 50%;
        left: 50%;
        padding: 50px 80px 50px 80px;
        font-family: 'Fenix', serif;
        font-size: 1em;
           }
#blueText {
        color:#00aeff;
          }

我的任务是在 WPF 应用程序中显示带有半透明元素的 HTML 内容。透明度应该通过网络浏览器和窗口。Webbrowser 本身不应该是半透明的。所以我需要一个 HTML 内容，我需要通过它查看桌面。

有没有办法做这样的事情？

谢谢你。

PS：对不起我的英语。

我知道 WPF 画笔类有一个 Opacity 属性。我们需要使用系统定义的画笔，但不透明度减半。我们想做这样的事情（这显然是假代码）...

<Border Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}, Opacity=0.5}" />

我们当然不能直接改变系统定义画笔的不透明度，因为这会在任何使用它的地方搞砸。

我们想要做的是以某种方式定义一个转换器，我们使用一个画笔并返回一个更改了不透明度的副本，但是由于这不是绑定，我们不知道在哪里/如何应用转换器. 另外，如果它是动态资源，我们需要确保它跟踪变化。

我们也不能简单地直接在 Border 上设置不透明度，因为它的所有子项也具有相同的降低的不透明度。

我们当前的解决方法不是将内容直接放在边框中，而是将边框及其内容作为网格中的兄弟元素放置在网格中，然后我们在边框上设置不透明度。由于内容现在位于边框的顶部而不是内部，因此它不受不透明度的影响。这只是意味着我们在可视化树中添加了额外的东西，这很烦人，但它确实有效。如果我们可以在 XAML 中简单地调整（一个）系统画笔的不透明度，那就更好了。

我在玩 CSS3 过滤器功能（模糊、对比度、反转等），并注意到有一个opacity功能：

filter: opacity(0.5);
-webkit-filter: opacity(0.5);
-moz-filter: opacity(0.5);

虽然我们已经有了：

opacity: 0.5;

如果我们将它们都应用于一个 HTML 元素，它似乎得到了双重效果！

现在这让我想知道，有什么区别吗？

编辑：

我不是在问旧的 IE，filter: alpha(opacity=50)因为那是微软的实现。我问的是 CSS3 还是filterCSS3 opacity？

这个代码笔显示了我的问题：http ://codepen.io/PiotrBerebecki/pen/pNvpdG

当用户点击大按钮时，cssopacity减少到 0。因为我应用了以下规则：transition: opacity 0.5s ease-in-out;淡出动画是平滑的。

我想在下一个按钮淡入时实现相同的平滑过渡。但是由于某种原因，下一个按钮突然出现而没有任何过渡。

你知道是什么导致了这个问题以及如何解决它吗？

console.clear();

(function() {
  
  // Data for the app
  const model = {
    buttons: ['tomato', 'blue'],
    currentButton: -1
  };
  
  // Logic for the app
  const controller = {
    init: function() {
      view.init();
    },
    getButtonName: function() {
      model.currentButton = (model.currentButton + 1) % model.buttons.length;
      return model.buttons[model.currentButton];
    }
  };
  
  // View for the app
  const view = {
    init: function() {
      this.root = document.getElementById('root');
      this.showNext();
    },
    
    animationDelay: 500,
    
    showNext: …

我现在正在尝试处理一段代码。希望将鼠标悬停在图像上会改变不透明度，并使其中的一些文本可见。

让图像改变不透明度很容易，但我只是想知道导致问题的文本显示。

我目前的 HTML -

.WhyAGradeNotes {
  display: inline-block;
  margin-left: 150px;
  margin-right: 150px;
  height: 300px;
  width: 250px;
  background-image: url("http://www.placehold.it/250x300");
}

.WhyAGradeNotes p {
  visibility: hidden;
}

.WhyAGradeNotes:hover {
  opacity: 0.5;
  .WhyAGradeNotes p {
    visibility: visible;
  }
}

    <section class = "WhyAGrade">
      <span class = "WhyAGradeNotes"><p>Revision Notes</p></span>
      <span class = "WhyAGradeSample"></span>
    </section>

如你所见，我遇到了困难。我猜它与可见性状态有关，但我不知道如何让它正常工作

我想知道是否有一种方法可以在我的图像上添加一个黑色图层，但让它稍微透明，这样您仍然可以看到图像。

我正在使用 Bootstrap 4 及以下是我正在使用的代码，包括 CSS :)

任何帮助都感激不尽。谢谢

<div class="row">
  <div class="col-md-6">    
    <div class="card-overlay" style="background-image: url('img/dirt1.jpg')">
      <div class="white-text text-center">
        <div class="card-block">
          <h3>Project title</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat 
 fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus 
 minus error nisi architecto nulla ipsum dignissimos. Odit
            sed qui, dolorum!.
          </p>
          <a class="btn btn-primary" href="...">Read More</a>
        </div>
      </div>
    </div> 
  </div>
</div>

CSS：

.card-overlay {
  background: rgba(0, 0, 0, 0.5);
}