设置图像透明度

Question

我有源代码

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="condition.aspx.cs" Inherits="condition" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<p>
    <br />
    <asp:ImageButton ID="ImageButton1" runat="server" Height="234px" 
        ImageUrl="~/images/condition.jpeg" Width="289px" />

</p>

<p style="font-size: small">
    Very often there are health issues that cannot be clearly classified under a 
    specific medical specialty. The topics under this section include health issues 
    of this kind. This section also explains symptoms related to different kinds of 
    illnesses and diseases. The different medical specialties are also covered in 
    this section.</p>
<p style="font-size: small">
    &nbsp;</p>
                                    <p style="font-size: small">
                                        &nbsp;</p>
                                    <div class="clearfix" style="padding-left: 5px;">
                                        <div style="float: left; width: 50%;">
                                            <span style="font-size: small">&nbsp;<a 
                                                href="http://www.aarogya.com/conditions-and-diseases/acute-diarrheal-disease.html"><span 
                                                id="act31">Acute Diarrheal Disease</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/allergy.html"><span 
                                                id="act16">Allergy</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/amebiasis.html"><span 
                                                id="act32">Amebiasis</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/appendicitis.html"><span 
                                                id="act17">Appendicitis</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/arthritis.html"><span 
                                                id="act18">Arthritis</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/asthma.html"><span 
                                                id="act19">Asthma</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/blindness.html"><span 
                                                id="act20">Blindness</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/blood-pressure.html"><span 
                                                id="act21">Blood Pressure</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/bronchitis.html"><span 
                                                id="act22">Bronchitis</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/brucellosis.html"><span 
                                                id="act33">Brucellosis</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/chicken-pox.html"><span 
                                                id="act34">Chicken Pox</span></a><br />
                                            &#8226;&nbsp;</span><a 
                                                href="http://www.aarogya.com/conditions-and-diseases/chikungunya-fever.html"><span 
                                                id="act35"><span style="font-size: small">Chikungunya Fever</span></span></a><span 
                                                style="font-size: small"><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/cholera.html"><span 
            id="act36">Cholera</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/conjunctivitis.html"><span 
            id="act25">Conjunctivitis</span></a><br />
                                            &#8226;&nbsp;<a 
            href="http://www.aarogya.com/conditions-and-diseases/computer-health-hazards.html"><span 
            id="act148">Computer Health Hazards</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/dengue.html"><span 
            id="act37">Dengue</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/diphtheria.html"><span 
            id="act38">Diphtheria</span></a><br />
                                            &#8226;&nbsp;<a 
            href="http://www.aarogya.com/conditions-and-diseases/diagnostic-tests.html"><span 
            id="act149">Diagnostic Tests</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/dysentery.html"><span 
            id="act26">Dysentery</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/guinea-worm.html"><span 
            id="act27">Guinea Worm</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/hepatitis.html"><span 
            id="act39">Hepatitis</span></a><br />
                                            &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/hookworm.html"><span 
            id="act40">Hookworm</span></a>
    </div>
    <div style="float: left;">
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/influenza.html"><span 
            id="act41">Influenza</span></a><br />
        &#8226;&nbsp;<a 
            href="http://www.aarogya.com/conditions-and-diseases/irritable-bowel-syndrome.html"><span 
            id="act28">Irritable Bowel Syndrome</span></a><br />
        &#8226;&nbsp;<a 
            href="http://www.aarogya.com/conditions-and-diseases/japanese-encephalitis.html"><span 
            id="act29">Japanese Encephalitis</span></a><br />
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/leprosy.html"><span 
            id="act42">Leprosy</span></a><br />
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/leptospirosis.html"><span 
            id="act43">Leptospirosis</span></a><br />
        &#8226;&nbsp;<a 
            href="http://www.aarogya.com/conditions-and-diseases/lymphatic-filariasis.html"><span 
            id="act44">Lymphatic Filariasis</span></a><br />
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/malaria.html"><span 
            id="act45">Malaria</span></a><br />
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/measles.html"><span 
            id="act46">Measles</span></a><br />
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/plague.html"><span 
            id="act30">Plague</span></a><br />
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/poliomyelitis.html"><span 
            id="act47">Poliomyelitis</span></a><br />
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/rabies.html"><span 
            id="act48">Rabies</span></a><br />
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/rubella.html"><span 
            id="act49">Rubella</span></a><br />
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/tetanus.html"><span 
            id="act50">Tetanus</span></a><br />
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/tuberculosis.html"><span 
            id="act51">Tuberculosis</span></a><br />
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/typhoid-fever.html"><span 
            id="act52">Typhoid Fever</span></a><br />
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/viral-hepatitis.html"><span 
            id="act178">Viral Hepatitis</span></a><br />
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/whooping-cough.html"><span 
            id="act53">Whooping Cough</span></a><br />
        &#8226;&nbsp;<a href="http://www.aarogya.com/conditions-and-diseases/yaws.html"><span 
            id="act54">Yaws</span></a><br />
        &#8226;&nbsp;</span><a 
            href="http://www.aarogya.com/conditions-and-diseases/yellow-fever.html"><span 
            id="act55"><span style="font-size: small">Yellow Fever</span></span></a>
    </div>
</div>
<p style="font-size: small">
    &nbsp;</p>


</asp:Content>

，我想添加以下代码，

<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<img src="klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</body>
</html>

我不想影响母版页，只是图片应该生效，在哪里添加此代码？

Answer 1

也许我遗漏了一些东西，但这不是那么简单吗？

<asp:ImageButton Style="opacity:0.4; filter:alpha(opacity=40);" ID="ImageButton1" ... />

当您准备好变得更高级时，向 CSS 文件添加一条规则并将其引用为“

<asp:ImageButton CssClass="yourclassname" ID="ImageButton1" ... />

无论哪种方式，都不会出现在所有浏览器中”。